Let's play Tailwind CSS with Angular

What is Tailwind CSS Tailwind CSS is a utility-first CSS framework packed with classes for quickly custom user interfaces without creating our classes.

Pros

• Prevent classes name of parent and child components are duplicate leads to a style collision problem.
• Make styling elements direction in a project the same way.
• Compile size of a CSS file is smaller than traditional styling ( I will write the articles about optimization Tailwind later, I hope files size are smaller following their advertisement 😂).

After talking about Tailwind, Let's start to install Tailwind to our project!.

Installation

• Install Angular CLI with npm or yarn.

// NPM
npm install -g @angular/cli

// Yarn
yarn add @angular/cli

• Create Angular project.

ng new angular-tailwind
cd angular-tailwind

• Add Tailwind CSS into our project.

// NPM
npm install -D tailwindcss postcss autoprefixer

// Yarn
yarn add tailwindcss

// Create file Tailwind config
npx tailwindcss init

• Add some settings in tailwind.config.js ( same level as package.json ) add "./src/**/*.{html,ts}", in content

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• Add Tailwind in our main style sheet ( It is different when you select style config when creating Angular project ).

1.1 Select Style as CSS

@tailwind base;
@tailwind components;
@tailwind utilities;

1.2 Select Style as SCSS or else

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

• Start build process

ng serve

• Let's try to apply Tailwind to our HTML code. If you can run the code and its beautiful display on the website congratulations!, you are finished adding Tailwind to the project. But f you are stuck adding Tailwind to our project please let me know in the comment.

However, Tailwind CSS still has CONS.

CONS

• We need to have good communication among the team. Because we change the way to style elements.

• The styles are mixed in HTML code makes it hard to understand.

• Take time for learning about utility classes of Tailwind such as Color, Spacing, Sizing, Typography, and so on.

Conclusion

Tailwind CSS is an alternative way to styling elements and helps eliminate the styling collision problems also reduces time to create a design system and styling elements.

Bonus

Install extensions for used Tailwind efficiencies.

• InteliJ The JetBrains already supported Tailwind CSS. If you want to read more, I provided this link
• VSCode link

My code.

Repository : Github

If something's wrong, incomplete or you want to share the experience. Please let me know in the comment.
Thank you for taking the time to read this😘.