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 [email protected] [email protected]

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>