Initialize Your Project
Start by creating a new project folder and setting up Node.js. This step prepares your environment so you can install and manage Tailwind CSS properly.
Example:
mkdir my-project
cd my-project
npm init -y
Install Tailwind CSS & Dependencies
Next, install Tailwind CSS along with PostCSS and Autoprefixer. These tools help process your CSS and ensure browser compatibility.
Example:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
Configure Tailwind Content Paths
Tailwind needs to know which files to scan for class names. You configure this in the tailwind.config.js file so unused styles are removed.
Example:
module.exports = {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {},
},
plugins: [],
}
Add Tailwind Directives to CSS
Include Tailwind’s base, components, and utility layers in your main CSS file. This allows Tailwind to inject its styles into your project.
Example:
@tailwind base;
@tailwind components;
@tailwind utilities;
Build CSS & Start Using Tailwind
Finally, compile your CSS and start using Tailwind utility classes in your HTML to design your UI quickly and efficiently.
Example:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
Tailwind is Working!
