上一篇介紹了 Tailwind 基本的語法，而今天要來看的是 Tailwind 的設定，之前說到的許多功能都是靠著這些設定達成，包含變數、模組化、tree-shake 等等，那就廢話不多說一起來看看設定吧～GOGO！
上次我們說到的 tailwind.config.js 這個檔案包含了各種相關設定，可以使用以下指令產生設定檔
Ares
<!-- 建立設定檔 -->
$ npx tailwindcss init
<!-- 建立包含所有預設值的設定檔 -->
$ npx tailwindcss init --full
<!-- 建立設定檔與 postcss.config.js -->
$ npx tailwindcss init -p
產出的設定檔包含幾個常用設定，如下
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false,
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
// 預設沒顯示但可使用的設定
// prefix: '',
// important: false,
// separator: ':',
// presets: [],
// variantOrder: [],
// corePlugins: [],
}
上面其中一個指令會生成 postcss.config.js，這個檔案是用來載入 postcss 插件用的，這邊預設會載入 tailwindcss 與 autoprefixer，如果想要載入其他的插件或設定才會用到這個檔案
// postcss.config.js
module.exports = {
plugins: {
// 使用 ./config.js 當作 Tailwind 的設定檔
tailwindcss: { config: './config.js' },
autoprefixer: {},
},
}
presets 可使用其他預設值替換 Tailwind 的預設值，如果團隊內有自己常用的預設值就可以使用此功能，設定一次之後開新專案時就可以節省許多時間，詳細設定方式可以參考官方
// tailwind.config.js
module.exports = {
presets: [
require('@acmecorp/tailwind-base')
]
}
purge
darkMode
prefix
important
variantOrder
separator
prefix 會將撰寫的 class 加上自定義的前綴，可防止樣式的衝突，在撰寫插件時常會使用到該功能
// tailwind.config.js
module.exports = {
prefix: 'tw-'
}
.tw-text-left {
text-align: left;
}
prefix 對自定義的 class 無效important 控制 css 後方是否加入 !important
// tailwind.config.js
module.exports = {
important: true
}
.text-left {
text-align: left !important;
}
important 對自定義的 class 無效因為 !important 有可能會導致 inline style 無效，或者引發其他權重問題，所以這邊 important 也可設定一個 ID 或 class，編譯時 Tailwind 會加入該選擇器前綴，而不是加上 !important
// tailwind.config.js
module.exports = {
important: '#app'
}
#app .text-left {
text-align: left;
}
separator 可自定義 RWD、hover 等等的區隔符號，預設為 :
// tailwind.config.js
module.exports = {
separator: '_'
}
/* 預設為 ':' */
.sm:bg-fixed {
background-attachment: fixed;
}
/* 修改為 '_' */
.sm_bg-fixed {
background-attachment: fixed;
}
purge 為 tree-shake 的功能，它會使用正則表達式偵測樣版，並將沒有用到的 class 刪除
// tailwind.config.js
module.exports = {
purge: ['./**/*.html']
}
以上設定會在環境變數為 production 時執行，如果專案沒有用到 webpack 的話，也可以用以下方式設定
// tailwind.config.js
module.exports = {
purge: {
layers: ['utilities'], // 指定清除樣式的圖層
mode: 'all', // 刪除選定圖層未使用的樣式
preserveHtmlElements: false, // 清除沒用到的 html 元素設定
enabled: true, // 是否開啟 purge
content: ['./**/*.html'], // 偵測哪些樣版內容
options: {
safelist: ['bg-red-500', 'px-4'] // 不會被清除的樣式
}
}
}
class，以防正則表達式偵測不到purge 僅會清除 layers 內未使用的樣式layers 預設為 base、components 與 utilities
preserveHtmlElements 的 html 元素指的是 h1、body 等等的樣式preserveHtmlElements 與 mode
darkMode 為深色模式，有 false、media 與 class 三個選項，開啟後 dark 前綴的 class 優先度會大於一般 class
false：關閉深色模式media：依照裝置的 prefers-color-scheme 開啟深色模式class：手動設定深色模式，依照根目錄的 <html> 是否有 class="dark" 切換<!-- 關閉深色模式 -->
<html>
<head></head>
<body>
<div class="bg-white dark:bg-black"></div>
</body>
</html>
<!-- 開啟深色模式 -->
<html class="dark">
<head></head>
<body>
<div class="bg-white dark:bg-black"></div>
</body>
</html>
theme 即是變數的概念，所有的斷點、顏色、間距等等皆會在這邊做設定
extend 會繼承預設值，並新增變數或覆蓋舊有變數
// tailwind.config.js
module.exports = {
theme: {
// 覆蓋 colors 預設值，僅留下 black
colors: {
black: '#333'
},
extend: {
// 保留 colors 預設值，並覆蓋 black
colors: {
black: '#444'
}
}
}
}
extend > theme > 預設值Tailwind 提供了 theme() 來幫我們減少重複作業，在上一篇我們也有提到過，使用方式如下
// tailwind.config.js
module.exports = {
theme: {
colors: {
black: '#333'
},
// 這邊 theme 的回傳值等於前面 colors 的值
backgroundColor: theme => theme('colors')
}
}
如果想要擴充預設的樣式又不想重寫預設值，則可以先載入預設樣式再合併
// tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: [
'Lato',
...defaultTheme.fontFamily.sans
]
}
}
}
}
另外說一下官方這邊提供了三個東西可載入
// 預設顏色
const defaultTheme = require('tailwindcss/colors')
// 預設設定
const defaultTheme = require('tailwindcss/defaultConfig')
// 預設 theme
const defaultTheme = require('tailwindcss/defaultTheme')
variants 可以設定 theme 內的樣式或是插件支援哪寫變化，例如 RWD 斷點、深色模式、hover 等等
功能同 theme 的 extend，會繼承預設值，並新增設定
// tailwind.config.js
module.exports = {
variants: {
// 覆蓋 backgroundColor 預設值，僅留下 responsive
backgroundColor: ['responsive']
extend: {
// 保留 backgroundColor 預設值，並新增 active
backgroundColor: ['active']
}
}
}
編譯 variants 內的項目時，會由陣列第一個開始編譯，也就是說最後一個 variant 優先權最高，所以如果要調整優先權請依照自己需求排序，另外還可以使用 DEFAULT 來表示普通 class 的位置
// tailwind.config.js
module.exports = {
variants: {
// 這邊以 bg-white 為例，優先權如下
// .hover:bg-white < bg-white < .focus:bg-white
backgroundColor: ['hover', 'DEFAULT', 'focus']
}
}
上面有提到 variants 優先權的部分，如果有在 extend 用到的屬性，不管前面如何設定，它都會照著預設優先權去編譯，並將新增的放到最後方，這時候如果想修改就必須設定 variantOrder
// tailwind.config.js
module.exports = {
// 這邊以 bg-white 為例，設定 variantOrder 後優先權如下
// bg-white < .focus:bg-white < .hover:bg-white < .active:bg-white
variantOrder: [
'DEFAULT',
'focus',
'hover',
'active'
],
variants: {
backgroundColor: ['hover', 'DEFAULT', 'focus'],
extend: {
// 這邊以 bg-white 為例，沒有設定 variantOrder 優先權如下
// bg-white < .hover:bg-white < .focus:bg-white < .active:bg-white
backgroundColor: ['active']
}
}
}
corePlugins 可以禁用某些你不需要的樣式，有物件型與陣列型，詳細選項可參考官方
// tailwind.config.js
module.exports = {
// 使用物件 true 與 false 決定使否啟用樣式
corePlugins: {
float: false,
objectFit: false,
objectPosition: false,
},
// 啟用陣列內所有樣式
corePlugins: [
'margin',
'padding',
'backgroundColor'
],
// 禁用所有樣式
corePlugins: []
}
plugins 是 Tailwind 一個重要的功能，它提供開發者自行開發插件，或是載入別人寫好的插件
以下載入他人的插件，並新增一個 group-disabled 的 variants
// tailwind.config.js
module.exports = {
variantOrder: [
'hover',
'group-disabled'
],
variants: {
extend: {
backgroundColor: ['group-disabled']
}
},
plugins: [
require('tailwindcss-interaction-variants')
]
}
首先要載入 plugin 函式，並依照官方格式撰寫，這邊加入兩個 class 而且設定 variants
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
prefix: 'tw-',
important: true,
variants: {
customPlugin: ['responsive', 'hover'],
},
plugins: [
plugin(function({ addUtilities, variants }) {
const newUtilities = {
'.skew-10deg': { transform: 'skewY(-10deg)' },
'.skew-15deg': { transform: 'skewY(-15deg)' }
}
addUtilities(newUtilities, {
// 是否依照依照設定檔加上前綴，預設為 true
respectPrefix: true,
// 是否依照設定檔加上 !important，預設為 true
respectImportant: true,
// 依照設定檔加入 variant
variants: variants('customPlugin')
})
})
]
}
這邊插件的撰寫有太多的變化，可以撰寫 base、utilitie、component 等等，自由度相當高，所以這邊就不多做琢磨了
看完 Tailwind 的設定其實並不難，許多東西預設值就很夠了，而且針對需要的地方客製化也相當方便，除此之外還有許多 plugin 可供使用，這也是它優秀的地方之一，畢竟有社群與自己的生態系在就會持續的進步，相信 Tailwind 未來會被更廣泛的使用
iThome鐵人賽
看影片追技術