Getting started with Angular + Tailwind

Getting started guide to Tailwind integration with Angular.

Vasanth Jagadeesan

Enterprise solution architect

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

Medium
Algolia
Starbucks
Github CoPilot
NASA's Jet Propulsion Laboratory
Heroku
Twitch
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.

Tailblocks — Ready-to-use Tailwind CSS blocks

Ready-to-use Tailwind CSS blocks

Why tailwind?

Who is using Tailwind

Getting started with Tailwind

Let's test tailwind classes in angular project

Conclusion

Share