Anatomy of tailwind.config.js
Understand each section of the config file including content, theme, extend, plugins, and presets, and how they affect compilation.
Why a Config File Exists
Tailwind CSS is designed to be customizable at its core. The tailwind.config.js file is the single source of truth for all customizations to the default design system. Without it, you get Tailwind's sensible defaults. With it, you can redefine any part of the design system — colors, fonts, spacing, breakpoints, animations, and more — while still generating the full utility class API automatically.
Generating the Config File
Create a default config file by running npx tailwindcss init. This generates a minimal tailwind.config.js with empty stubs for the most common sections. Use npx tailwindcss init --full to generate a complete config that includes every default value — useful for reference but usually too verbose to work with day-to-day.
# Generate a minimal config
npx tailwindcss init
# Generate a full config showing all defaults
npx tailwindcss init --full
# Generate config + postcss.config.js together
npx tailwindcss init -pAll lessons in this course
- Anatomy of tailwind.config.js
- Content Paths and Purging
- Extending vs Overriding the Theme
- Adding and Configuring Plugins