How to set up TailwindCSS in Angular.

TailwindCSS is one of the most loved CSS frameworks on the block and one of the reasons many people prefer TailwindCSS to the existing solutions is because, unlike other CSS frameworks, TailwindCSS is easy to pick up and allows for great customization. You can change just about anything in Tailwind by adding some configurations to the config file. This means that you don’t need to force changes to a class with important. If you don’t like something, you can replace it.

In this tutorial, I’ll show you how to add TailwindCSS to your Angular project, but before we get into that, let’s explore a bit about tailwind CSS.

What is TailwindCSS

The TailwindCSS team defines it as “a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup”. What this means is that TailwindCSS provides us with classes that we can use to produce any design imaginable. Each class does exactly one thing and this makes it easy to see what the page will look like in the browser from the code.

Composing independent classes to produce a design means applying a lot of classes to an element and this means having a bloated HTML file, but in tailwind CSS, this can be fixed with the @apply derivative. You can read more here.

Unlike bootstrap, with tailwind CSS, you don’t need to hold on to styles you don’t need. Tailwind provides a purge feature that will remove unused style while from your production build. This means that you can shave off many megabytes of unused styles.

How to set up tailwind in angular

To add TailwindCSS to your project, you have two choices: using the CDN link or CLI.
Whereas the CDN link helps you get started with Tailwind CSS quickly, the CLI is much more complex to set up, but it allows you the kind of freedom that is not possible with the CDN link. With the CLI, you can add or override the existing configurations with ease and this makes it the preferred choice for large projects.

If CDN is what you want, simply add <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> to the head portion of your project’s index.html and you are set. But if you need customization, then there are two methods of adding Tailwind using the CLI.

Method 1: Angular CLI

1. Run ng add @ngneat/tailwind on your command line. This will ask you a bunch of questions.
2. When asked if you want to enable JIT mode type yes. The JIT comes with lightning-fast build time and allows us to generate arbitrary styles without writing custom CSS. with this feature, you can add our custom style like bg-[#348feb] to our template and Tailwind will generate a class for us. The CSS generated in JIT mode is the same as in production, so this means lean CSS during development and a responsive dev tool as a result. You can read more about the JIT mode here.
3. When asked if you want to enable dark mode select class
4. When asked what TailwindCSS plugins you want to enable, pick the ones you like or press enter to continue. Tailwind should now be installed in your project. After the installation, you will notice that a new tailwind.config.js file has been added to your project and both the style.css and index.html have been modified. These are just the required bit for Tailwind in your project. Go ahead and use tailwind, everything should work.

Method 2: Manual installation

Step 1 => Run npm install -D tailwindcss@latest to install tailwindCSS
Step 2 => Run npx tailwindCSS init to initialize TailwindCSS in your project.
Step 3 => Update the newly create tailwind.config.js file to this

module.exports = {
  prefix: "",
  purge: {
    enabled: true,
    content: ["./src/**/*.{html,ts}"],
  },
  darkMode: "class", // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Step 4 => Add this to the beginning of your styles.scss file
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
Everything should now work.

How To Build Tailwind For Production.
For angular, simply running npm run build should build angular for your project. But the size will be large. You can reduce the size of the production build by simply adding the enabled: true to the purge field of the tailwind.config.js file and Tailwind will go ahead and purge the used styles.

One thing to keep in mind when purging for production with TailwindCSS is that dynamically creating class strings in your HTML with string concatenation will break your production build. This is because TailwindCSS uses PurgeCSS internally and it doesn’t try to parse your HTML or do anything special. It simply looks for any strings in the entire file that match this regular expression /[^<>"'`\s]*[^<>"'`\s:]/g. So things like<div class="text-{{ error ? 'red' : 'green' }}-600"></div> might break because Tailwind won’t catch that.

It may still work if the class is used correctly somewhere else. What you want to do is to always include the full class no matter what like <div class=”{{error? ‘text-red-600’: ‘text-green-600’'}}”></div>. Another way to do this is to add the needed class as a comment and continue dynamically creating a class string and PurgeCSS will pick it up.

That’s it for this tutorial, thanks for reading.