Install Tailwind CSS using Post CSS in your Angular Project
Tailwind CSS is a highly customizable and utility-first CSS framework that allows you to rapidly build modern user interfaces. Tailwind CSS has became a popular choice for building modern web interfaces with its utility-First approach. It provides a comprehensive set of pre-defined classes that you can use to style your application. In this Blog, we will go through about how we will install tailwind CSS using post CSS in your angular project application.
Before we install tailwind CSS we begin make this in our system:
a) Node.js and npm (Node Package Manager) installed in your system .
b) Angular CLI install globally in your system.
c) Your project should be install using Angular CLI.
Following are the steps to install tailwind CSS using post CSS in Angular Project:
- First you will install necessary dependencies. To run the command to install dependencies:
npm install tailwindcss postcss autoprefixer postcss-import postcss-loader postcss-scss @angular-builders/custom-webpack — save-dev
2. when install dependencies then create the tailwind CSS configuration file and a file named tailwind.config.js . Open the file and add these line of codes in file.
module.exports = {
purge: [‘./src/**/*.html’, ‘./src/**/*.ts’],
darkMode: false, // or ‘media’ or ‘class’
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
3. After this configure post CSS file. When you will install then create a file named postcss.config.js and add these lines of code in that file.
module.exports = {
plugins: [
require(‘postcss-import’),
require(‘tailwindcss’),
require(‘autoprefixer’),
]
}
4. Import tailwind CSS file in your styles file. Open the src/styles.scss file and add these lines:
@import ‘tailwindcss/base’;
@import ‘tailwindcss/components’;
@import ‘tailwindcss/utilities’;
This imports the Tailwind CSS base styles, components, and utility classes into your project.
5. You will use tailwind CSS classes in your components file. For example:
<div class=”bg-gray-100 p-4 rounded-lg”>
<h1 class=”text-2xl font-bold mb-2">Welcome to Tailwind CSS!</h1>
<p class=”text-gray-600">Start building your awesome UI with Tailwind CSS.</p>
</div>
6. Build and run your Angular Project then run the command in terminal:
ng serve
7. After this open the link and check that tailwind CSS applied in your content.