DEV Community

Cover image for Tailwind CSS – The Complete Guide (Architecture, Internals, Full Syntax, and Everything You Must Know)
Farhad Rahimi Klie
Farhad Rahimi Klie

Posted on • Edited on

Tailwind CSS – The Complete Guide (Architecture, Internals, Full Syntax, and Everything You Must Know)

#tailwindcss #css #coding #frontend

Tailwind CSS is a utility-first CSS framework that allows developers to build modern, responsive, and scalable user interfaces without writing custom CSS files. Instead of pre-designed components, Tailwind provides low-level utility classes that map directly to CSS properties.

1. What Is Tailwind CSS?

Tailwind CSS is:

  • A utility-first CSS framework
  • Built on PostCSS
  • Highly configurable
  • Designed for component-based UI development

Instead of writing:

.card {
  padding: 1rem;
  background-color: white;
  border-radius: 0.5rem;
}
Enter fullscreen mode Exit fullscreen mode

You write:

<div class="p-4 bg-white rounded-lg"></div>
Enter fullscreen mode Exit fullscreen mode

2. Tailwind CSS Architecture

Tailwind has a compile-time architecture, not runtime.

High-Level Architecture 

HTML / JSX / Vue
      ↓
 Tailwind Class Scanner
      ↓
 Tailwind Compiler (PostCSS)
      ↓
 Generated CSS Output
Enter fullscreen mode Exit fullscreen mode

Core Architectural Components

  1. Utility Class Engine
  2. Design Token System
  3. Variant Generator
  4. JIT Compiler
  5. Plugin API

3. Internal Working of Tailwind CSS

Step-by-Step Internal Flow

  1. Tailwind scans your files (.html, .js, .jsx, .tsx)
  2. Extracts all used class names
  3. Matches them against utility definitions
  4. Generates only the required CSS
  5. Outputs a minimal CSS file

Why This Is Important

  • No unused CSS
  • Extremely small bundle size
  • Fast performance

4. Tailwind JIT (Just-In-Time) Compiler

Tailwind uses a JIT compiler by default.

What JIT Does

  • Generates CSS on demand
  • Allows arbitrary values
  • Enables instant rebuilds

Example:

<div class="w-[37px] h-[82vh] bg-[#1da1f2]"></div>
Enter fullscreen mode Exit fullscreen mode

This works without configuration.

5. Installing Tailwind CSS

Using npm 

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Enter fullscreen mode Exit fullscreen mode

Tailwind Configuration Files

  • tailwind.config.js
  • postcss.config.js

6. tailwind.config.js – Full Breakdown 

module.exports = {
  content: ["./src/**/*.{html,js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
Enter fullscreen mode Exit fullscreen mode

content

Defines files Tailwind scans for class names.

theme

Contains design tokens:

  • colors
  • spacing
  • fonts
  • breakpoints
  • shadows

plugins

Extends Tailwind with custom utilities.

7. Design System & Tokens

Tailwind uses design tokens instead of raw values.

Spacing Scale 

<div class="p-4 m-2"></div>
Enter fullscreen mode Exit fullscreen mode
Class Value
p-1 0.25rem
p-4 1rem
p-8 2rem

8. Typography Utilities

Font Size 

<p class="text-sm">Small</p>
<p class="text-xl">Large</p>
Enter fullscreen mode Exit fullscreen mode

Font Weight 

<p class="font-light"></p>
<p class="font-bold"></p>
Enter fullscreen mode Exit fullscreen mode

Line Height 

<p class="leading-relaxed"></p>
Enter fullscreen mode Exit fullscreen mode

9. Color System 

<div class="bg-blue-500 text-white"></div>
Enter fullscreen mode Exit fullscreen mode

Default Color Scale

  • 100 → light
  • 500 → base
  • 900 → dark

Supports:

  • HEX
  • RGB
  • HSL
  • Custom palettes

10. Layout System

Display 

<div class="block"></div>
<div class="flex"></div>
<div class="grid"></div>
Enter fullscreen mode Exit fullscreen mode

Position 

<div class="relative">
  <div class="absolute top-0 right-0"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

11. Flexbox Utilities 

<div class="flex items-center justify-between">
  <span>Left</span>
  <span>Right</span>
</div>
Enter fullscreen mode Exit fullscreen mode
Utility CSS
flex-row flex-direction: row
items-center align-items: center
justify-between justify-content: space-between

12. Grid Utilities 

<div class="grid grid-cols-3 gap-4"></div>
Enter fullscreen mode Exit fullscreen mode

Grid Template 

<div class="grid grid-cols-[200px_1fr]"></div>
Enter fullscreen mode Exit fullscreen mode

13. Responsive Design (Breakpoints)

Default Breakpoints

Prefix Width
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Example 

<div class="text-sm md:text-lg lg:text-xl"></div>
Enter fullscreen mode Exit fullscreen mode

14. State Variants

Hover 

<button class="bg-blue-500 hover:bg-blue-700"></button>
Enter fullscreen mode Exit fullscreen mode

Focus 

<input class="focus:outline-none focus:ring-2">
Enter fullscreen mode Exit fullscreen mode

Active, Disabled 

<button class="active:scale-95 disabled:opacity-50"></button>
Enter fullscreen mode Exit fullscreen mode

15. Pseudo-Class Variants 

<li class="first:text-red-500 last:text-blue-500"></li>
Enter fullscreen mode Exit fullscreen mode

16. Dark Mode

Configuration 

darkMode: 'class'
Enter fullscreen mode Exit fullscreen mode

Usage 

<div class="bg-white dark:bg-black"></div>
Enter fullscreen mode Exit fullscreen mode

17. Animation & Transition

Transition 

<button class="transition duration-300 ease-in-out"></button>
Enter fullscreen mode Exit fullscreen mode

Animation 

<div class="animate-spin"></div>
Enter fullscreen mode Exit fullscreen mode

Built-in animations:

  • spin
  • bounce
  • pulse
  • ping

18. Transform Utilities 

<div class="scale-105 rotate-6 translate-x-2"></div>
Enter fullscreen mode Exit fullscreen mode

19. Border & Shadow System 

<div class="border border-gray-300 rounded-xl shadow-lg"></div>
Enter fullscreen mode Exit fullscreen mode

20. Filters & Effects 

<img class="blur-sm grayscale hover:blur-none">
Enter fullscreen mode Exit fullscreen mode

21. Arbitrary Values (Advanced) 

<div class="mt-[3.25rem] bg-[#ff00ff]"></div>
Enter fullscreen mode Exit fullscreen mode

22. Plugin System

Example Plugin 

plugin(function({ addUtilities }) {
  addUtilities({
    '.center': {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center'
    }
  })
})
Enter fullscreen mode Exit fullscreen mode

23. Component Extraction (Best Practice) 

<button class="px-4 py-2 bg-blue-600 text-white rounded">
Enter fullscreen mode Exit fullscreen mode

Can be extracted using:

  • React components
  • Vue components
  • Blade components

24. Performance Optimization

  • JIT compiler
  • Tree-shaking
  • Zero unused CSS
  • Build-time generation

Production CSS is often under 10KB.

25. Tailwind vs Traditional CSS

Feature Tailwind CSS
Speed Very Fast Slow
Reusability Component-based Class-based
Bundle Size Minimal Large
Maintainability High Medium

26. Real-World Use Cases

  • Dashboards
  • Admin panels
  • SaaS products
  • Marketing pages
  • Mobile-first apps

Used by companies like:

  • GitHub
  • Shopify
  • Vercel

27. When NOT to Use Tailwind

  • Very small static pages
  • Teams unfamiliar with utility-first approach
  • Strict design systems without flexibility

28. Final Thoughts

Tailwind CSS is not just a CSS framework — it is a design system engine.

If you:

  • Build modern UIs
  • Use React / Next.js / Vue
  • Care about performance
  • Want full control over styling

Then Tailwind CSS is one of the best frontend tools available today.

Author

Farhad Rahimi Klie

Top comments (0)