119 lines
2.9 KiB
Markdown
119 lines
2.9 KiB
Markdown
+++
|
|
title = "Customizing Your Tailwind CSS Theme"
|
|
date = 2025-03-17
|
|
description = "Learn how to customize Tailwind CSS to match your brand"
|
|
+++
|
|
|
|
# Customizing Your Tailwind CSS Theme
|
|
|
|
One of the greatest strengths of Tailwind CSS is its customizability. In this post, we'll explore how to tailor Tailwind to match your brand's design system.
|
|
|
|
## The tailwind.config.js File
|
|
|
|
The `tailwind.config.js` file is where all your customizations live. Here's a basic example of customizing colors and fonts:
|
|
|
|
```js
|
|
module.exports = {
|
|
theme: {
|
|
colors: {
|
|
primary: '#3490dc',
|
|
secondary: '#ffed4a',
|
|
danger: '#e3342f',
|
|
// ...
|
|
},
|
|
fontFamily: {
|
|
sans: ['Graphik', 'sans-serif'],
|
|
serif: ['Merriweather', 'serif'],
|
|
},
|
|
extend: {
|
|
spacing: {
|
|
'128': '32rem',
|
|
'144': '36rem',
|
|
},
|
|
borderRadius: {
|
|
'4xl': '2rem',
|
|
}
|
|
}
|
|
},
|
|
variants: {
|
|
extend: {
|
|
borderColor: ['focus-visible'],
|
|
opacity: ['disabled'],
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Extending vs. Overriding
|
|
|
|
When customizing Tailwind, you have two options:
|
|
|
|
1. **Extending** - Add new values while keeping the defaults
|
|
2. **Overriding** - Replace the defaults entirely
|
|
|
|
For most projects, extending is the safer option as it preserves Tailwind's useful defaults.
|
|
|
|
## Custom Plugins
|
|
|
|
You can also create custom plugins to add more complex functionality:
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
const plugin = require('tailwindcss/plugin')
|
|
|
|
module.exports = {
|
|
plugins: [
|
|
plugin(function({ addUtilities, theme }) {
|
|
const newUtilities = {
|
|
'.text-shadow-sm': {
|
|
textShadow: '0 1px 2px rgba(0, 0, 0, 0.05)',
|
|
},
|
|
'.text-shadow': {
|
|
textShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
|
|
},
|
|
'.text-shadow-lg': {
|
|
textShadow: '0 15px 30px rgba(0, 0, 0, 0.11), 0 5px 15px rgba(0, 0, 0, 0.08)',
|
|
},
|
|
}
|
|
|
|
addUtilities(newUtilities)
|
|
})
|
|
]
|
|
}
|
|
```
|
|
|
|
## Responsive Design
|
|
|
|
Tailwind makes it easy to create responsive designs with breakpoint prefixes:
|
|
|
|
```html
|
|
<div class="text-center sm:text-left md:text-right lg:text-justify">
|
|
This text will be centered on mobile, left-aligned on small screens,
|
|
right-aligned on medium screens, and justified on large screens.
|
|
</div>
|
|
```
|
|
|
|
## Dark Mode
|
|
|
|
Tailwind v2.0 and later includes built-in dark mode support:
|
|
|
|
```js
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
darkMode: 'media', // or 'class'
|
|
// ...
|
|
}
|
|
```
|
|
|
|
Then in your HTML:
|
|
|
|
```html
|
|
<div class="bg-white dark:bg-gray-800 text-black dark:text-white">
|
|
This will be light mode by default and dark mode when the user's
|
|
system preferences are set to dark mode (or when the 'dark' class
|
|
is applied to an ancestor if you're using 'class' mode).
|
|
</div>
|
|
```
|
|
|
|
By customizing Tailwind CSS, you can create a unique design system that perfectly matches your brand while still leveraging the productivity benefits of a utility-first CSS framework.
|