Note: In the v12 release, Angular added support for Tailwind CSS. See tailwind official documentation on how to install Tailwind CSS in Angular v12
Rapidly build modern websites without ever leaving your HTML. - Tailwind CSS
Install Tailwind CSS
Open terminal and go to the Angular project directory and run
npm install tailwindcss
Optionally, install Tailwind CSS plugins
npm install @tailwindcss/typography
npm install @tailwindcss/forms
Configure Tailwind CSS
In the Angular project directory, create a Tailwind CSS configuration file name
tailwind.config.js
Add the following configurations
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class',
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography')
],
};
Add configuration for forms and typography plugins if the following Tailwind CSS plugins are installed
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography')
],
- Open
styles.scss
file to import the 3 Tailwind CSS layers
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
Try it out
Add the following to any components
<h1 class="text-4xl font-bold text-center text-blue-500">Hello World</h1>
Run ng serve
and open browser on http://localhost:4200/
Using a utiliy-first frameworks like TailwindCSS can make your HTML files bloated to deal with this duplication and to keep your project maintainable, visit Extracting Components at Tailwind CSS
To see how I created a Authentication form using TailwindCSS visit link below
Top comments (1)
Tailwind CSS is an effective framework that is easy to maintain.