Tailwind CSS
/Beginner
Installation & Setup
Definition
The process of integrating Tailwind CSS into modern build tools (like Vite, Next.js, or Webpack) via PostCSS.
Explain Like I'm New
You can't just link to a Tailwind CSS file in your HTML like Bootstrap. Tailwind is a compiler. You install it via npm, configure it to watch your HTML/JS files, and it generates a custom CSS file containing only the classes you actually used.
Real World Example
Running `npm install -D tailwindcss postcss autoprefixer`, initializing the config file, and adding the `@tailwind` directives to your main `index.css`.
Common Use Cases
- •Project bootstrapping
Terminal Output
bash / terminal
// 1. Install via npm
// npm install -D tailwindcss postcss autoprefixer
// npx tailwindcss init -p
// 2. Add Tailwind directives to your global CSS file (e.g., src/index.css)
@tailwind base; /* Injects CSS resets (Preflight) */
@tailwind components; /* Injects custom component classes */
@tailwind utilities; /* Injects all the utility classes you used in your HTML */
Interview Questions
basic
- Can you use Tailwind without Node.js or npm?
intermediate
- What is PostCSS and why does Tailwind use it?