CodeBriefly
Tech Magazine

How to Setup TailwindCSS in Angular?

0 1,211

Get real time updates directly on you device, subscribe now.

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).

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

Lets serve the Angular app.

ng serve

Test tailwindCSS

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

Hello world!

Recommendations

Personally, I dont 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 whats 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 Im using the @apply. After that, you can use the .btn class only with your HTML. Using this way our HTML looks clean.

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), :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.3not 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 🙂


You may like:

How to Manage Password Strength - Angular

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

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. AcceptRead More