YouTipCustom Color
[Try it »](#)
### Custom Colors (Colors)
Tailwind provides a default color system, but you can add or modify colors for your project via theme.extend.
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'custom-blue': '#1c64f2',
'custom-gray': '#3a3a3a',
},
},
},
};
In the above example, custom-blue and custom-gray are added to the color system, and you can use them in HTML just like default colors:
## Example
Custom Blue Background
[Try it »](#)
### Custom Spacing (Spacing)
Tailwind’s spacing system includes m- (margin) and p- (padding) classes. Default spacing values can be extended via theme.extend.spacing:
// tailwind.config.js
module.exports = {
theme: {
extend: {
spacing: {
'128': '32rem', // Define a custom spacing value
'144': '36rem',
},
},
},
};
This allows you to use custom spacing in HTML:
## Example
Custom Padding
[Try it »](#)
### Custom Fonts (Fonts)
Tailwind also allows you to customize font families. You can extend font settings via fontFamily:
// tailwind.config.js
module.exports = {
theme: {
extend: {
fontFamily: {
'sans': ['Helvetica', 'Arial', 'sans-serif'],
'custom': ['"Open Sans"', 'Arial', 'sans-serif'],
},
},
},
};
After that, you can apply custom fonts using the font-custom class:
## Example
This is a custom font
[Try it »](#)
### Custom Breakpoints (Breakpoints)
Tailwind provides five responsive breakpoints (sm, md, lg, xl, 2xl).
You can modify these breakpoints or add custom ones in tailwind.config.js:
// tailwind.config.js
module.exports = {
theme: {
extend: {
screens: {
'xs': '475px', // Add a new extra small screen breakpoint
'xxl': '1600px', // Add an extra large screen breakpoint
},
},
},
};
Now you can use classes like xs:w-64 or xxl:w-96 to set widths at different breakpoints:
## Example
Responsive Width
[Try it »](#)
### Custom Box Shadows (Box Shadows)
You can extend shadow effects through the boxShadow property.
// tailwind.config.js
module.exports = {
theme: {
extend: {
boxShadow: {
'custom': '0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.1)',
},
},
},
};
Then you can apply this custom shadow in HTML:
## Example
Element with Custom Shadow
[Try it »](#)
* * *
## Extending Tailwind with Plugins
Besides modifying the configuration file, Tailwind also allows you to extend functionality using plugins, so you can use more utility classes in your project.
### Using Tailwind Plugins
You can install third-party plugins to add extra features:
npm install @tailwindcss/forms
Then, add the plugin in tailwind.config.js:
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/forms'),
],
};
This plugin provides many utility classes for form controls.
* * *
## Reusing Styles with @apply
If you find yourself using the same combination of styles in multiple places, you can reuse them using the @apply directive.
For example, create a custom class combining multiple utility classes:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* In your CSS file */
.avatar {
@apply w-16 h-16 rounded-full border-2 border-white;
}
Compile Tailwind CSS:
npx tailwindcss -i ./styles.css -o ./output.css --watch
The compiled output.css file will replace @apply with actual CSS styles.
You can apply the .avatar class to multiple elements without repeating all the utility classes:
## Example
* * *
## Defining Custom Components with @layer
Tailwind allows you to define custom component classes using the @layer directive.
For example, create a custom button with Tailwind styling:
/* In your CSS file */
@layer components {
.btn {
@apply px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg;
}
.btn-danger {
@apply px-4 py-2 bg-red-500 text-white font-semibold rounded-lg;
}
}
Then use the custom button classes in HTML:
## Example
* * *
## Extending State Modifiers with Variants
In tailwind.config.js, you can use variants to configure whether Tailwind should generate utility classes for specific states.
For example, add more style variants for hover and focus states:
// tailwind.config.js
module.exports = {
variants: {
extend: {
backgroundColor: ['active', 'disabled'],
textColor: ['group-hover'],
},
},
};
This generates additional utility classes such as bg-red-500 active:bg-blue-500, switching background colors when active.