# 【Tailwind CSS】Theme 主題
設定你的網站的預設主題
`tailwind.config.js` 中的 `theme` 區塊可以設定你自己的 color palette, type scale, fonts, breakpoints, border radius values 等等。
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
colors: {
'blue': '#1fb6ff',
'purple': '#7e5bef',
'pink': '#ff49db',
'orange': '#ff7849',
'green': '#13ce66',
'yellow': '#ffc82c',
'gray-dark': '#273444',
'gray': '#8492a6',
'gray-light': '#d3dce6',
},
fontFamily: {
sans: ['Graphik', 'sans-serif'],
serif: ['Merriweather', 'serif'],
},
extend: {
spacing: {
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
}
}
}
}
```
tailwind 有提供預設的 theme，你也可以自己修改屬於你的 theme。
## Theme Structure
theme 包含了 `screens`, `colors`, 還有 `spacing` 等關鍵字，所有的關鍵字可以從[這裡看](https://v3.tailwindcss.com/docs/theme#configuration-reference)。
### screens
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
screens: {
'sm': '640px',
'md': '768px',
'lg': '1024px',
'xl': '1280px',
'2xl': '1536px',
}
}
}
```
查看更多關於[中斷點的說明](https://v3.tailwindcss.com/docs/screens)。
### Colors
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
colors: {
transparent: 'transparent',
black: '#000',
white: '#fff',
gray: {
100: '#f7fafc',
// ...
900: '#1a202c',
},
// ...
}
}
}
```
color 預設會繼承相關的顏色設定(例如: `backgroundColor`, `borderColor`, `textColor` 等)
查看更多關於 [color 的說明](https://v3.tailwindcss.com/docs/customizing-colors)
### Spacing
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
spacing: {
px: '1px',
0: '0',
0.5: '0.125rem',
1: '0.25rem',
1.5: '0.375rem',
2: '0.5rem',
2.5: '0.625rem',
3: '0.75rem',
3.5: '0.875rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
7: '1.75rem',
8: '2rem',
9: '2.25rem',
10: '2.5rem',
11: '2.75rem',
12: '3rem',
14: '3.5rem',
16: '4rem',
20: '5rem',
24: '6rem',
28: '7rem',
32: '8rem',
36: '9rem',
40: '10rem',
44: '11rem',
48: '12rem',
52: '13rem',
56: '14rem',
60: '15rem',
64: '16rem',
72: '18rem',
80: '20rem',
96: '24rem',
},
}
}
```
spacing 預設會繼承相關的間距設定(例如: `padding`, `margin`, `width`, `height`, `maxHeight`, `flex-basis`, `gap`, `inset`, `space`, `translate`, `scrollMargin`, `scrollPadding` 等)
查看更多關於[間距的設定](https://v3.tailwindcss.com/docs/customizing-spacing)
### Core Plugin
theme 其餘的區塊都是用來設定 core plugin 的關鍵字
```javascript=
module.exports = {
theme: {
borderRadius: {
'none': '0',
'sm': '.125rem',
DEFAULT: '.25rem',
'lg': '.5rem',
'full': '9999px',
},
}
}
```
以上設定會產生以下 css:
```javascript=
.rounded-none { border-radius: 0 }
.rounded-sm { border-radius: .125rem }
.rounded { border-radius: .25rem }
.rounded-lg { border-radius: .5rem }
.rounded-full { border-radius: 9999px }
```
:::info
你可以注意到 default 產生的 css class 沒有後綴。
:::
## 客制化預設主題
### 拓展預設主題
如果你今天想保留預設主題，並且新增其他選項，你可以使用 `theme.extend`
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
fontFamily: {
display: 'Oswald, ui-serif', // Adds a new `font-display` class
}
}
}
}
```
設定好之後你就可以使用對應的 css class
```html=
<h1 class="font-display">
This uses the Oswald font
</h1>
```
某些例子中，你的設定不是對應到 css class，而是對應到 `variants`
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
screens: {
'3xl': '1600px', // Adds a new `3xl:` screen variant
}
}
}
}
```
使用:
```html=
<blockquote class="text-base md:text-md 3xl:text-lg">
Oh I gotta get on that internet, I'm late on everything!
</blockquote>
```
## 覆蓋預設主題
你想要直接覆蓋預設主題的話，可以把設定直接寫在 `theme` 底下
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
// Replaces all of the default `opacity` values
opacity: {
'0': '0',
'20': '0.2',
'40': '0.4',
'60': '0.6',
'80': '0.8',
'100': '1',
}
}
}
```
上面這個例子來說，只有覆蓋 opacity 的設定，所以其他例如 color, spacing 等等會繼承預設設定。
當然覆蓋和新增可以同時使用
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
opacity: {
'0': '0',
'20': '0.2',
'40': '0.4',
'60': '0.6',
'80': '0.8',
'100': '1',
},
extend: {
screens: {
'3xl': '1600px',
}
}
}
}
```
### 參考其他變數
如果你需要參考其他設定中的變數，你可以這麼寫:
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
spacing: {
// ...
},
backgroundSize: ({ theme }) => ({
auto: 'auto',
cover: 'cover',
contain: 'contain',
...theme('spacing')
})
}
```
:::warning
注意: 這種寫法只能用在第一層的 theme 關鍵字 (auto, cover等不能用)
:::
:negative_squared_cross_mark:
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
fill: {
gray: ({ theme }) => theme('colors.gray')
}
}
}
```
:accept:
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
fill: ({ theme }) => ({
gray: theme('colors.gray')
})
}
}
```
### 參考預設主題
如果你想參考的對象來自預設主題，可以用 import
```javascript
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans,
]
}
}
}
}
```
### 禁用整個 core plugin
:negative_squared_cross_mark: 不要這樣做:
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
opacity: {},
}
}
```
:accept: 可以這樣做:
```javascript=
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: {
opacity: false,
}
}```
Sign in with Wallet
Connect another wallet