DEV Community

Cover image for How to setup Tailwindcss in Angular project
Ambroise BAZIE
Ambroise BAZIE

Posted on • Edited on

How to setup Tailwindcss in Angular project

#angular #css #tailwindcss #javascript

The purpose of this article is to enhance the combination of Angular and Tailwindcss.

Prerequisites

  • Angular

Tailwindcss

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. according to the official definition visit tailwindcss official website to know more.

Installation

Inside your existing angular project or new one run the following commands in the project terminal:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

Inside tailwind.config.js

Add the paths of your templates files

module.exports = {
// ...
  content: [
    "./src/**/*.{html,ts}",
  ],
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Add tailwind to style.scss 

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Use tailwind inside app.component.html 

<div class="text-2xl">Angular and Tailwindss</div>
Enter fullscreen mode Exit fullscreen mode

Run server 

ng serve
Enter fullscreen mode Exit fullscreen mode

References

  1. Tailwindcss

Top comments (0)

Read next

sunnyss profile image

Java Programming

sunny -

56_kode profile image

One Level of Abstraction: The Key to Clean Functions

56kode -

abeertech01 profile image

Dockerize PERN-TypeScript App Using Prisma ORM With Docker Compose

Abdul Ahad Abeer -

richardshaju profile image

Stop Using Try-Catch: A Better Way to Handle Errors in JavaScript

Richard Shaju -