DEV Community

alternativeboy
alternativeboy

Posted on

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
Enter fullscreen mode Exit fullscreen mode
  • Create Angular project.
ng new angular-tailwind
cd angular-tailwind
Enter fullscreen mode Exit fullscreen mode
  • Add Tailwind CSS into our project.
// NPM
npm install -D tailwindcss postcss autoprefixer

// Yarn
yarn add tailwindcss

// Create file Tailwind config
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode
  • 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: [],
}
Enter fullscreen mode Exit fullscreen mode
  • 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;
Enter fullscreen mode Exit fullscreen mode

1.2 Select Style as SCSS or else

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Enter fullscreen mode Exit fullscreen mode
  • Start build process
ng serve
Enter fullscreen mode Exit fullscreen mode
  • 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😘.

Discussion (0)