Setting Up Your Project Environment
Before installing Tailwind CSS, you need a proper project setup. This usually involves creating a project folder and initializing Node.js. Node helps manage dependencies and run build tools efficiently.
Example:
npm init -y
You can initialize a project using:
This creates a basic package.json file required for Tailwind installation.
Installing Tailwind CSS via npm
Tailwind CSS is installed using npm (Node Package Manager). This step downloads Tailwind and its required dependencies into your project.
Example:
Run the following command:
npm install -D tailwindcss postcss autoprefixer
Then initialize Tailwind:
npx tailwindcss init
Configuring Tailwind in Your Project
After installation, Tailwind needs to be configured to scan your files and apply styles. This is done inside the tailwind.config.js file.
Example:
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Adding Tailwind to Your CSS File
You need to include Tailwind directives in your main CSS file so that Tailwind styles can be applied to your project.
Example:
@tailwind base;
@tailwind components;
@tailwind utilities;
Running Tailwind and Using Utility Classes
Finally, compile your CSS and start using Tailwind classes in your HTML. Tailwind provides utility-first classes for fast UI development.
Example:
Hello Tailwind CSS!
