Home AngularJs How to Install Tailwind CSS in Angular?

How to Install Tailwind CSS in Angular?

by Shahriar Sagor

Hello Dev , today in this example, you will learn how to install tailwind css in angular. Here in this example i will show you How to Install Tailwind CSS in Angular? It’s a very simple example of angular add the tailwind css. Just need to follow the below example for how to add tailwindcss to our angular application.

Step 1: Create New App

We can easily create our angular app by using the below command:

ng new my-new-app
Step 2: Install Tailwind CSS

Now in this step, i will install the tailwind CSS npm package. so i can use the tailwind CSS. let’s install it by using the the following command:

npm install -D tailwindcss postcss autoprefixer
Step 3: Configure Tailwind CSS

After the installed successfully, i have to configure the tailwind CSS in our application.

Just run the below command and it will be create tailwind.config.js file.

npx tailwindcss init

Next, i have to add the paths on tailwind.config.js file as like as below:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
Step 4: Update styles.css

Next, i have to import the tailwind css on style.css file as like as below:

src/styles.css

/* You can add global styles to this file, and also import other style files */
@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Update Component File

Now, i am ready to use the tailwind css class, so i can update the component file as like as below:

src/app/app.component.html

<div class="flex justify-center">
  <p class="text-2xl">How to Install TailwindCSS In Angular? - Codingspoint.com</p>
</div>
  
<div class="bg-green-200 border-green-700 border-b p-4 m-4 rounded">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
Install Tailwind CSS Plugins (Optional)

Now this is a optional step, but if you want to install some more tailwind css plugins then you can easily installed it. Here, i will show you, how we can install the Typography, Forms, Line-Clamp and Aspect-Ratio plugins by using the below command:

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

Next, i have to add paths on the tailwind.config.js file as like as below:

tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/line-clamp'),
  ],
}

Read Also: php artisan serve not working in Laravel

Thanks for read. I hope it help you. For more you can follow us on facebook

close

You may also like