How to add tailwind CSS in angular

Hello developer, I found angular, angular material, and tailwindcss great combination. it saves a lot of time and extra code which maintains the DRY(Don’t repeat yourself) principle.

In this tutorial, I am going to show how to add tailwindcss in an angular project.

let’s generate an angular project

Note: make sure you have angular CLI and my suggestion is always to use the angular latest version for new projects.

ng new angular-tailwind

After generating your project

Let’s integrate tailwind with the angular base package

ngneat/tailwind is a schematic way, can add Tailwind CSS to Angular applications.

To setup tailwind input this command

ng add @ngneat/tailwind

When you command, ngneat/tailwind schematically detect completable version, so there will be some question to set ngneat/tailwind package…

• ? Would you like to enable Tailwind JIT (preview feature)? Yes
• ? Would you like to enable dark mode? class
• ? What @tailwindcss plugins do you want to enable? forms, typography

The tailwind JIT(Just In Time) feature is great. most of the time I used it. JIT feature only support version 7 or later.

let check what heppand

When you finish the question you can see,

• CREATE tailwind.config.js: tailwind config file is created, where you can your custom tailwindcss configration
• UPDATE package.json: ngneat/tailwind and tailwindcss package will add
• UPDATE src/styles.scss: Tailwindcss css will import in this file
  tips: If you are using angular material than make sure your tailwindcss bottom of angular material css
• UPDATE src/index.html: dark mode class will add in body tag.

Integrate tailwindcss manually

Add tailwindcss package in dev dependacy

npm install -D tailwindcss

Two peer dependencies postcss and autoprefixer is required Tailwind CSS

npm install postcss@latest autoprefixer@latest

Generate tailwindcss config file

Make sure you have globally installed npx in your machine

npx tailwindcss init

now you can see tailwind.config.js file created. and in your tailwind.config.js file contain …

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Great now add tailwindcss css file in your global styles.css file

Again make sure your angular material CSS file is above

/* Material import above */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* You can add global styles to this file, and also import other style files */

Use example

In your app.component.html file, add a tailwind card

<div class="max-w-md py-4 px-8 bg-white shadow-lg rounded-lg my-20">
  <div class="flex justify-center md:justify-end -mt-16">
    <img class="w-20 h-20 object-cover rounded-full border-2 border-indigo-500"
      src="https://images.unsplash.com/photo-1499714608240-22fc6ad53fb2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
  </div>
  <div>
    <h2 class="text-gray-800 text-3xl font-semibold">Tailwind Design</h2>
    <p class="mt-2 text-gray-600">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae dolores deserunt ea
      doloremque natus error, rerum quas odio quaerat nam ex commodi hic, suscipit in a veritatis pariatur minus
      consequuntur!</p>
  </div>
  <div class="flex justify-end mt-4">
    <a href="#" class="text-xl font-medium text-indigo-500">Sajal Mia</a>
  </div>
</div>