How to Add TailwindCSS to Your Angular App

Dec 05 2022

Introductory guide on configuring TailwindCSS in Angular applications

First you need to use the Angular CLI to create a new application.

>ng new your-app

Use npm to install TailwindCSS and its peer dependencies as devDependencies.

$ npm install -D tailwindcss postcss autoprefixer

You can use npx to generate a tailwindcss configuration file for your application.

$ npx tailwindcss init

Now you have to configure your template paths in the tailwind config file that was generated for you.

`tailwind.config.js`

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    // add this line
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

You have to add the @tailwind directives for the TailwindCSS layers to your CSS file.

`./src/styles.css`

/* ./src/styles.css' */
@tailwind base;
@tailwind components;
@tailwind utilities;

Lastly, you implement tailwindcss in your app with the class attribute.

`app.component.html`

<!-- app.component.html' -->
<h1 class="text-5xl font-bold uppercase">
  Angular is Awesome, and even better when you add TailwindCSS!
</h1>

After you start your build process you should be able to see the styles in your application.

ng serve

Conclusion

This was a setup guide for adding TailwindCSS to your Angular applications. It’s really easy to install tailwind and get started with using it to style your project. Try Tailwind in your next Angular app and let me know how it goes! You can find me on: Twitter, LinkedIn, or Github