說明：此系列文章是個人對Tailwind CSS官方文檔的翻譯俘闯，不是很嚴謹蓝厌，請諒解激率。
函數(shù)與指令
@tailwind
用@tailwind指令來把 tailwind的base,components, utlities和screen樣式添加到自己的CSS中。
/**
* 這個指令用來注入tailwind的基礎樣式和用插件注冊的樣式
*/
@tailwind base;
/**
* 這個指令用來注入tailwind的組件類和用插件注冊的組件類
*/
@tailwind components;
/**
* 這個指令用來注入tailwind的工具類和用插件注冊的工具類
*/
@tailwind utilities;
/**
* 這個指令用來控制tailwind注冊每個工具類的響應式變體的位置
* 如果省略不寫的話懈词，tailwind會默認把這些類添加到你的style頁面的最底部
*/
@tailwind screens;
@apply
用@apply指令來將已有的工具類列入你的自定義CSS中
- 當你想把哪個HTML中的工具類提取到新組件中的時候楔绞，就可以用這個指令
- 規(guī)則可以一行列出來结闸，也可以多行使用
@apply - 當然唇兑，把
@apply聲明和普通的CSS聲明混在一起寫也是OK的
.btn {
@apply font-bold py-2 px-4 rounded;
}
.btn {
@apply font-bold;
@appky py-2;
@apply px-4;
@apply rounded;
}
.btn:hover {
apply bg-blue-700;
transform: translateY(-1px);
}
- 為避免特異性問題酒朵，如果用
@apply列出的規(guī)則里面如果有!important的話，!important會被自動刪除 - 如果想用
@apply來列入一個已有的類扎附，而且想把它!important的話蔫耽，只需要把!important加在聲明的末尾就OK了 - 注意，如果你現(xiàn)在項目中用著Sass或者SCSS的話留夜，就得用Sass 的插值屬性才好使
/* ?案例一 */
.foo {
color: blue !important;
}
.bar {
@apply foo;
}
/* 上面的相當于?? */
.bar {
color: blue;
}
/* ?案例二 */
.btn {
@apply font-bold py-2 px-4 rounded !important;
}
/* 相當于?? */
.btn {
font-weight: 700 !important;
padding-top: .5rem !important;
padding-bottom: .5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
border-radius: .25rem !important;
}
.btn {
@apply font-bold py-2 px-4 rounded #{!important};
}
得記住了匙铡，用@apply指令給其他工具類的偽類變體、響應式變體在行內(nèi)進行列舉是行不通的碍粥。而是應該將這個類的普通版本賦予到相應的偽類選擇器或新媒體查詢中鳖眼。
/* 無效寫法 */
.btn {
@apply block bg-red-500;
@apply hover:bg-blue-500;
@apply md:inline-block;
}
/* 正確寫法 */
.btn {
@apply block bg-red-500;
}
.btn:hover {
@apply bg-blue-500;
}
@screen md {
.btn {
@apply inline-block;
}
}
如果你給工具類配置了前綴，但是想采用更簡潔的語法的話嚼摩，可以選擇在使用@apply指令的時候省略前綴：
/* 下面兩種都是有效寫法 */
.btn {
@apply te-font-bold tw-py-2 tw-px-4 tw-rounded;
}
.btn {
@apply font bold py-2 px-4 rounded;
}
variants
@variants 指令可以用來生成自定義工具類的變體钦讳，諸如 responsive, hover, active之類矿瘦，只需要把定義語句包裹在@variants指令中。（詳見響應式設計與偽類變體章節(jié)）
@responsive
如果想要生成自定義類的響應式變體的話愿卒，可以用@responsve指令來啊包裹這些類的定義缚去。
@responsive {
.bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
}
/* 根據(jù)自定義斷點，上面的代碼會生成下面的類?? */
@media (min-width: 640px){
.sm\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 768px){
.md\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 1024px){
.lg\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
@media (min-width: 1280px){
.xl\:bg-gradient-brand {
background-image: linear-gradient(blue, green);
}
/* ... */
}
上面的響應式變體會在你的樣式頁面末尾被添加到tailwind已有的媒體查詢中琼开，以確保帶有響應式前綴的類總是比規(guī)定相同CSS屬性的非響應式類更強易结。
@screen
@screen指令允許你通過名字來創(chuàng)建媒體查詢，而不用非得在自己的CSS里面復制他們的值柜候。
例如搞动，假設你在 640px 處有個sm斷點，而且你現(xiàn)在要根據(jù)這個斷點寫一些自定義CSS語句來渣刷，就不用像下邊這樣寫個復制斷點值的原生媒體查詢：
@media (min-width: 640px) {
/* ... */
}
用@screen指令的話滋尉，直接用斷點名稱來參考就行了：
@screen sm {
/* ... */
}
