- To write and maintain the code of your application is quicker using tailwind css. Tailwind css provide all the tools you need to build out a site in html. so you require rarely to write custom css.
- Tailwind css is generally not be preferred in large project. because your code get messy if you tried to apply css conditionally .
Step – 1 : Create your project.
ng new my-project
Step – 2 : Install Tailwind CSS using below npm.
- npm install -D tailwindcss postcss autoprefixer
- npx tailwindcss init
- npm i @tailwindcss/typography
- npm i @tailwindcss/forms
Step – 3 : Add the paths to all of your template files in tailwind.config.js file.
module.exports = {
prefix: '',
purge: {
content: [
'./src/**/*.{html,ts}',
]
},
darkMode: 'class', // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [require('@tailwindcss/forms'),require('@tailwindcss/typography')],
}
Step – 4 : Add the Tailwind directives to in style.css
@import 'tailwindcss/base'; @import 'tailwindcss/components'; @import 'tailwindcss/utilities';
Step – 5 : Add the HTML in app.component.html
<h1 class="text-3xl font-bold underline"> Hello world! </h1>
output :
