tailwind-configuration

# Tailwind CSS - Configuration Tailwind CSS is highly customizable through its configuration file, allowing you to define your design system, extend the default theme, and configure plugins. ## Key Concepts ### Configuration File Structure The `tailwind.config.js` (or `.ts`, `.cjs`, `.mjs`) file is the heart of Tailwind customization: ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', ], theme: { extend: { // Custom theme extensions }, }, plugins: [], darkMode: 'class', // or 'media' prefix: '', important: false, separator: ':', } ``` ### Content Configuration The `content` array tells Tailwind where to look for class names: ```javascript module.exports = { content: [ './src/**/*.{html,js,jsx,ts,tsx}', './pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}', './app/**/*.{js,ts,jsx,tsx}', './public/index.html', ], // ... } ``` #### Content with Transform For dynamic class names, use safelist or content transform: ```javascript module.exports = { content: { files: ['./src/**/*.{html,js}'], transform: { md: (content) => { // Extract classes from markdown return content } } }, safelist: [ 'bg-red-500', 'bg-green-500', { pattern: /bg-(red|green|blue)-(100|200|300)/, }, ], } ``` ## ...