Tailwind Config Js Overview in TailwindCSS
Overview of tailwind.config.js
tailwind.config.js is the main configuration file where you customize your Tailwind CSS setup. It lets you extend or override the default design system, enable plugins, configure purge options, and more.
What is tailwind.config.js?
A JavaScript file generated when you install Tailwind via CLI (
npx tailwindcss init).Used to customize Tailwind’s default settings.
Controls themes, variants, plugins, and build options.
Basic Structure
/** @type {import('tailwindcss').Config} */module.exports = { content: [ "./src/**/*.{html,js}", // Files Tailwind scans for class names ], theme: { extend: { colors: { // Add custom colors here primary: '#1D4ED8', secondary: '#9333EA', }, spacing: { '72': '18rem', '84': '21rem', }, fontFamily: { sans: ['Inter', 'sans-serif'], }, }, }, plugins: [ require('@tailwindcss/forms'), // Example plugin ],}Key Sections
| Section | Purpose |
|---|---|
content | Paths to your template files for PurgeCSS to scan |
theme | Customize or extend colors, fonts, spacing, breakpoints, etc. |
extend | Safely add new values without overriding defaults |
plugins | Add official or third-party Tailwind plugins |
variants | Control which variants (hover, focus, etc.) are generated |
corePlugins | Enable or disable core utility plugins |
Common Customizations
Adding Custom Colors
theme: { extend: { colors: { brand: '#FF6363', }, },},Adding Custom Fonts
theme: { extend: { fontFamily: { body: ['Open Sans', 'sans-serif'], }, },},Adding Custom Breakpoints
theme: { extend: { screens: { '3xl': '1600px', }, },},Using Plugins
Tailwind offers official plugins for forms, typography, aspect-ratio, line-clamp, etc.
plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'),]PurgeCSS Setup
To remove unused CSS in production, list your source files under content:
content: [ "./src/**/*.{html,js,jsx,ts,tsx}",],Summary
tailwind.config.js is your control center for customizing Tailwind — extend colors, fonts, spacing, add plugins, and optimize your builds.
If you want, I can help you create a custom config file tailored to your project!
