Add Tailwind CSS to Angular 14 apps

In this post, we will demonstrate how you can integrate Tailwind CSS into your Angular 14 application by providing you with step-by-step instructions.

Tailwind CSS is a utility-first CSS framework that makes it simple to develop attractive design systems. Tailwind's focus is on code readability and maintainability. It is predicated on the concept that you may achieve practically any goal using CSS by adding a large number of utility classes directly in your HTML document. On the other hand, Angular is a platform that enables developers to develop high-end enterprise applications. When Angular and Tailwind CSS are combined, you have the ideal stack for developing high-quality web applications.

Open a new command-line interface and run the following command:

ng new tailwinddemo --routing --style=css

We choose CSS since we don't need a preprocessor for using Tailwind CSS. Next, navigate inside your project's folder and run the following commands to install the required dependencies:

npm install postcss --save-dev
npm install tailwindcss

Next, we need to generate the tailwind.config.js file, which includes your customized Tailwind CSS setup where you'll be able to make adjustments to your design system and configure Tailwind plugins. Simply run the following command:

npx tailwind init

When you actually need Tailwind utility classes in your code, they will be automatically produced for you on request. Therefore, you will need to instruct Tailwind where inside your project to look for the aforementioned utilities. Open the tailwind.config.js file open, and replace the existing content with the following:

module.exports = {
 content: ['./src/**/*.{html,ts}', './projects/**/*.{html,ts}'],
 theme: {
   extend: {},
 },
 plugins: [],
};

The settings above informs Tailwind CSS that the HTML and TypeScript files that it needs to consider can be found within the src/ and projects/ directories:

After that, open the src/style.css file and add the following content:

@tailwind base;
@tailwind components;
@tailwind utilities;

The @tailwind directives will be processed by Tailwind, which will then inject its base, components, and utilities' classes.

That's all, you can now start using Tailwind classes to style your Angular 14 application!

• Date: 09 Jun 2022