Getting started with Angular + Tailwind

Why tailwind?

Tailwind is an utility-first css framework with a set of utility css classes. Using these class we can easily build a UI components and modifies their designs to create our own design pattern.

"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."

Who is using Tailwind

1. Medium
2. Algolia
3. Starbucks
4. Github CoPilot
5. NASA's Jet Propulsion Laboratory
6. Heroku
7. Twitch
8. Stripe

Getting started with Tailwind

You can install tailwind in your existing project very in straight forward way.

npm i -D tailwindcss

Create tailwind configuration file `tailwind.config.js` in your angular project root.

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

Import tailwind css modules in `styles.scss`

styles.css

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

Let's test tailwind classes in angular project

<button type="button" class="btn-primary">Default</button>

.btn-primary {
    @apply text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800;
}

Conclusion

We have seen how to integrate Tailwind CSS in Angular with simple examples.

Installation: Tailwind CLI - Tailwind CSS

Documentation for the Tailwind CSS framework.

Tailwind CSS

Tailblocks — Ready-to-use Tailwind CSS blocks

Ready-to-use Tailwind CSS blocks