說明：此系列文章是個(gè)人對(duì)Tailwind CSS官方文檔的翻譯量愧，不是很嚴(yán)謹(jǐn)椎椰，請(qǐng)諒解遥椿。
添加基礎(chǔ)樣式
在tailwind上添加自己全局基礎(chǔ)樣式的最佳實(shí)踐
基礎(chǔ)樣式是樣式表開頭的樣式箭跳，可為基本HTML元素（例如<a>標(biāo)記懂版，標(biāo)題等）設(shè)置實(shí)用的默認(rèn)值萌狂，或應(yīng)用有目的性的重置档玻，例如流行的box-sizing重置。
Tailwind開箱即用地包含了一組有用的基本樣式茫藏，我們稱之為Preflight误趴，它實(shí)際上只是 normalize.css以及一薄層的其他更有目的性的樣式。
對(duì)于大多數(shù)項(xiàng)目來說务傲，Preflight就已經(jīng)是一個(gè)很好的起點(diǎn)凉当，但是也可以添加自己其他的基本樣式：
直接在HTML中使用class
如果想給html或者body元素添加全局樣式，只需要在元素標(biāo)簽上添加已有的class就好了售葡，不用寫css
<!doctype html>
<html lang="en" class="text-gray-900 antialiased leading-tight">
<!--...-->
<body class="min-h-screen bg-gray-100">
<!--...-->
</body>
</html>
使用CSS
如果想對(duì)特定元素定義某些基礎(chǔ)樣式看杭，最簡單的方法就是直接添加到css中。
直接在@tailwind base后面自定義 基礎(chǔ)樣式挟伙。為了避免特異性問題楼雹，得放在@tailwind components前面：
@tailwind base;
h1 {
@apply text-2xl;
}
h2 {
@apply text-xl;
}
h3 {
@apply text-lg;
}
a {
@apply text-blue-600 underline;
}
@tailwind components;
@tailwind utilities;
@font-face rules
在項(xiàng)目中使用的自定義字體可以添加到@font-face規(guī)則中，就跟上邊添加css一樣。
@tailwind base;
@font-face {
font-family: Proxima Nova;
font-weight: 400;
src: url(/fonts/proxima-nova/400-regular.woff) format("woff");
}
@font-face {
font-family: Proxima Nova;
font-weight: 500;
src: url(/font/proxima-nova/500-medium.woff) format("woff");
}
@tailwind components;
@tailwind utilities;
使用插件
使用addBase函數(shù)寫插件也可以添加基礎(chǔ)樣式：
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addBase, config }){
addBase({
'h1': { fontSize: config('theme.fontSize.2xl') },
'h2': { fontSize: config('theme.fontSize.xl') },
'h3': { fontSize: config('theme.fontSize.lg') },
})
})
]
}
所有使用addBase插件添加的樣式會(huì)自動(dòng)包含在@tailwind base的樣式中贮缅。
什么情況下使用插件榨咐？
總的來說，用CSS往項(xiàng)目中添加基礎(chǔ)樣式比用插件的方式簡單得多谴供。
傾向于使用插件的情況：
- 打算將基礎(chǔ)樣式公開發(fā)布块茁，使其更方便其他用戶安裝；
- 想要在公司中的多個(gè)項(xiàng)目中復(fù)用基礎(chǔ)樣式桂肌，而且更傾向于共享JS依賴而不是CSS依賴数焊。
