How to Setup TailwindCSS in Angular?

In this article, we will discuss “How to Setup TailwindCSS in Angular”. “TailwindCSS” is known as utility first CSS framework, we can rapidly build modern websites without ever leaving the HTML. TailwindCSS is different from other CSS frameworks like Bootstrap, etc. You can create whatever you want as per the required UI using the given utility class (CSS class).

Table of Contents

Toggle

Setup Angular Project

You can use the following “ng new” command into the terminal to setup the Angular project.

ng new ng-project

You can skill this step if already have a running Angular project.

Install tailwindcss

Install tailwindcss via the following npm command.

npm install -D tailwindcss postcss autoprefixer

Then run the “npx init” command to generate a tailwind.config.js file.

npx tailwindcss init

Configure template paths

Update the following code snippet to tailwind.config.js.

content: [
    "./src/**/*.{html,ts}",
],

Update style.css

Open “scr/style.css” and add the “Tailwind directives to your CSS”.

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

Serve Angular Application

Let’s serve the Angular app.

ng serve

Test tailwindCSS

Open the app.component.html and add the following code.

<div class="container">
    <h1 class="text-3xl font-bold underline bg-black text-white">
        Hello world!
    </h1>
</div>

Recommendations

Personally, I don’t recommend it if you are new to CSS, not because is hard but because it makes you lazier. If you are new, then please write your CSS manually so you can understand what’s working behind it. Here, lots of utility (CSS) classes are available which you can add to your HTML to make your desired layout. Also, when we add classes into the HTML. It makes our HTML very dirty. To overcome this issue, you have to put the TailwindCSS classes in your CSS/SCSS files. Please check the following example.

.btn {
    @apply py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-400
}

Notice I’m using the “@apply”. After that, you can use the “.btn” class only with your HTML. Using this way our HTML looks clean.

<button class="btn">Hello</button>

Install TailwindCSS plugins (Optional)

TailwindCSS provides some additional plugins, that are optional to install as per your requirements.

You can install those plugins using the following npm command.

npm install -D @tailwindcss/typography @tailwindcss/forms @tailwindcss/line-clamp @tailwindcss/aspect-ratio

Configure tailwindCSS plugins

Update tailwind.config.js file as follows.

module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
    // ...
  ],
}

Optional fix for error

If you face the following error in creating the build.

⠸ Generating browser application bundles (phase: building)...(node:7416) UnhandledPromiseRejectionWarning: HookWebpackError: Transform failed with 1 error:
error: Invalid version: "15.2-15.3"
    at makeWebpackError (E:\ng-project\node_modules\webpack\lib\HookWebpackError.js:48:9)
    at E:\ng-project\node_modules\webpack\lib\Compilation.js:3055:12
    at eval (eval at create (E:\ng-project\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:54:1)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)

You have to add the following to the end of the “.browserslistrc” file located at the root of the project.

not IE 9-10 # Angular support for IE 9-10 has been deprecated and will be removed as of Angular v11. To opt-in, remove the 'not' prefix on this line.
not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
not ios_saf 15.2-15.3
not safari 15.2-15.3

For more details, you can refer to this angular-CLI issue.

Conclusion

In this article, we are discussing “How to Setup TailwindCSS in Angular”. Hope you like this article. Please feel free to add comments if any queries or suggestions.

Keep learning & stay safe 🙂

How to use trackBy in Angular with Example

If you like our content, please consider buying us a coffee.
Thank you for your support!
Buy Me a Coffee