Getting Started with Tailwind CSS

Tailwind · Reference cheat sheet

📋 Overview

Tailwind CSS is a utility-first framework: you compose small classes (flex, p-4, text-sm) in markup instead of writing bespoke CSS for every component.

🔧 Core concepts

Install (v3 typical):

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

💡 Examples

HTML utilities:

<button class="rounded-lg bg-slate-900 px-4 py-2 text-sm text-white hover:bg-slate-700">
  Save
</button>

tailwind.config.js content paths:

export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

CSS entry (v3):

@tailwind base;
@tailwind components;
@tailwind utilities;

⚠️ Pitfalls

• If classes are built via string concatenation, the scanner may miss them — use complete class names or safelist.
• Missing content paths → empty CSS output.
• Mixing Tailwind versions (v3 PostCSS vs v4 Vite plugin) without matching docs causes broken builds.

🔗 Related

• utility_classes.md
• responsive.md
• custom_config.md
• Comparisons/tailwind_vs_css.md