YouTipCustom Colors Example
[Try it out »](#)
Enable Tailwind's dark mode support via darkMode.
module.exports = {
darkMode: 'class', // or 'media'
theme: {
extend: {
colors: {
background: {
light: '#FFFFFF',
dark: '#000000',
},
},
},
},
}
## Example
Dark Mode Example
### 3. Configuring Variants: variants
The variants option lets you define which states (such as hover, focus, etc.) should be included in the final CSS.
You can extend or override the default variants:
variants: {
extend: {
borderColor: ['focus-visible'],
opacity: ['disabled'],
},
}
### 4. Using Plugins: plugins
The plugins option allows you to add custom utility classes.
These plugins can be provided by Tailwind CSS itself or created by the community, and have the following format:
plugins: [ require('some-tailwindcss-plugin')]
Using plugin examples:
## Example
const plugin = require('tailwindcss/plugin');
module.exports = {
plugins: [
plugin(function({ addUtilities }) {
addUtilities({
'.text-shadow': {
textShadow: '2px 2px 4px rgba(0,0,0,0.5)',
},
});
}),
],
}
Importing community plugins:
## Example
module.exports = {
plugins: [
require('@tailwindcss/forms'), // Form styling plugin
require('@tailwindcss/typography'), // Typography plugin
],
}
* * *
## Tailwind CSS Configuration
By default, Tailwind looks for the tailwind.config.js file in your project's root directory, where you can set the configurations you need:
## Example
/** @type {import('tailwindcss').Config} */
module.exports = {
// Specify which files Tailwind CSS should extract class names from. Here configured to extract from all .html and .js files under the `./src` directory.
content: ['./src/**/*.{html,js}'],
theme: {
// Custom color configuration
colors: {
blue: '#1fb6ff', // Defines a color named 'blue' with value #1fb6ff
purple: '#7e5bef', // Defines a color named 'purple' with value #7e5bef
pink: '#ff49db', // Defines a color named 'pink' with value #ff49db
orange: '#ff7849', // Defines a color named 'orange' with value #ff7849
green: '#13ce66', // Defines a color named 'green' with value #13ce66
yellow: '#ffc82c', // Defines a color named 'yellow' with value #ffc82c
'gray-dark': '#273444', // Defines a color named 'gray-dark' with value #273444
gray: '#8492a6', // Defines a color named 'gray' with value #8492a6
'gray-light': '#d3dce6', // Defines a color named 'gray-light' with value #d3dce6
},
// Custom font family configuration
fontFamily: {
sans: ['Graphik', 'sans-serif'], // Defines a font family named 'sans' including 'Graphik' and generic 'sans-serif'
serif: ['Merriweather', 'serif'] // Defines a font family named 'serif' including 'Merriweather' and generic 'serif'
},
// Custom extension configuration
extend: {
// Custom spacing extension
spacing: {
'8xl': '96rem', // Defines a spacing named '8xl' with value 96rem
'9xl': '128rem' // Defines a spacing named '9xl' with value 128rem
},
// Custom border radius extension
borderRadius: {
'4xl': '2rem' // Defines a border radius named '4xl' with value 2rem
}
}
}
}
The following table lists the configuration options for the tailwind.config.js file along with their usage instructions:
| **Configuration Item** | **Description** | **Default Value** | **Example** |
| --- | --- | --- | --- |
| **content** | Configure the paths of template files that Tailwind CSS scans to remove unused styles. | `['./src/**/*.{html,js,ts,jsx,tsx}']` | `content: ["./src/**/*.html", "./src/**/*.vue"]` |
| **theme** | Used to define and extend Tailwind's default design system, including colors, spacing, fonts, etc. | `extend: {}` | `theme: { colors: { primary: '#3490dc' } }` |
| **extend** | Used to extend Tailwind's default configuration items instead of overriding them. | `{}` | `extend: { colors: { primary: '#3490dc' } }` |
| **screens** | Configure responsive breakpoints to determine when to apply specific styles. | `{ sm: '640px', md: '768px', lg: '1024px', xl: '1280px' }` | `screens: { '2xl': '1536px' }` |
| **colors** | Customize or extend the color palette. | Provides a series of colors by default, such as `blue`, `red`, `green`, etc. | `colors: { primary: '#1D4ED8', secondary: '#64748B' }` |
| **spacing** | Set inner and outer margins (`p`, `m`, `pt`, `mt`, etc.). | Provides default units such as `0.5rem`, `1rem`, `2rem`, etc. | `spacing: { 18: '4.5rem' }` |
| **fontFamily** | Customize font families. | `'sans', 'serif', 'mono'` | `fontFamily: { sans: ['Inter', 'sans-serif'] }` |
| **fontSize** | Customize font sizes. | `'sm': '0.875rem', 'lg': '1.125rem'` | `fontSize: { '4xl': '2.5rem' }` |
| **fontWeight** | Customize font weights. | `'normal', 'bold', 'bolder', 'lighter'` | `fontWeight: { 'light': '300', 'bold': '700' }` |
| **lineHeight** | Set line heights. | `'none': '1', 'tight': '1.25', 'normal': '1.5', 'loose': '2'` | `lineHeight: { 'relaxed': '1.75', 'loose': '2' }` |
| **borderRadius** | Set corner radii. | `'none': '0px', 'sm': '0.125rem', 'md': '0.375rem', 'lg': '0.5rem'` | `borderRadius: { 'xl': '1.5rem' }` |
| **borderWidth** | Set border widths. | `{ default: '1px', '0': '0', '2': '2px' }` | `borderWidth: { '3': '3px' }` |
| **zIndex** | Set `z-index` levels. | `{ '0': '0', '10': '10', '20': '20' }` | `zIndex: { 'max': '9999' }` |
| **opacity** | Set opacity values. | `{ '0': '0', '25': '0.25', '50': '0.5', '75': '0.75', '100': '1' }` | `opacity: { '40': '0.4' }` |
| **boxShadow** | Set box shadows. | `{ sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', default: '0 4px 6px rgba(0, 0, 0, 0.1)'}` | `boxShadow: { 'lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1)' }` |
| **container** | Set the maximum width of containers (used for responsive design). | `{ center: false, padding: '2rem' }` | `container: { center: true, padding: '1rem' }` |
| **aspectRatio** | Set element aspect ratios. | `{ 'none': 'none' }` | `aspectRatio: { '16/9': '16/9' }` |
| **gridTemplateColumns** | Set CSS Grid column templates. | `{ auto: 'auto', '1fr': '1fr' }` | `gridTemplateColumns: { 'layout': 'repeat(3, 1fr)' }` |
| **gridColumn** | Set grid item column-span behavior. | `{ 'span-1': 'span 1 / span 1' }` | ` gridColumn: { 'span-2': 'span 2 / span 2' }` |
| **transitionProperty** | Set transition properties. | `{ all: 'all' }` | `transitionProperty: { 'color': 'color' }` |
| **transitionDuration** | Set transition durations. | `{ 75: '75ms', 150: '150ms', 300: '300ms' }` | `transitionDuration: { '400': '400ms' }` |
| **transitionTimingFunction** | Set transition timing functions. | `{ 'ease': 'ease', 'linear': 'linear' }` | `transitionTimingFunction: { 'ease-out': 'ease-out' }` |
Through tailwind.config.js, you can easily customize Tailwind CSS's functionality and styles to suit various design needs. By making good use of features such as extend, plugins, and theme configurations, you can greatly improve your project's development efficiency and style flexibility.