如何評價CSS框架TailwindCSS？

端午三天，你們在放假，而我，一個人躲在家里，苦練 tailwindcss。

我在準備這樣一個學習項目，它與傳統的文章/視頻類學習不同，我會在教程中內置大量的可交互案例，提供沉浸式的學習體驗，并且還可以支持實時修改代碼觀察案例更改結果。大家可以期待一下。

經過這個項目的歷練，現在，我已熟練度拉滿，徹底拿捏了 tailwindcss。

魔功大成！

這篇文章，就跟大家分享一下我在 tailwindcss 中已經使用到的高級用法。

一、徹底讀懂配置文件 tailwind.config.js
二、定義自己喜歡的語法
二、定義自己喜歡的功能塊
三、定義自己想要的插件
三、高級用法：簡單實現皮膚切換

0

高端，從讀懂配置文件開始

在使用 tailwindcss 時，我們可以在項目根目錄創建一個配置文件?tailwind.confing.js，用于控制 tailwindcss 的語法，理論上來說，你可以把 tw 調整成任何你需要的形狀。

使用如下指令，可以在根目錄創建一個最簡單的配置文件模板

npx?tailwindcss?init

/**?@type?{import('tailwindcss').Config}?*/
module.exports?=?{content:?[],theme:?{extend:?{},},plugins:?[],
}

content

content 選項是一個數組，用于指定 tailwindcss 語法生效的文件集合。

content:?['./pages/**/*.{js,jsx}','./components/**/*.{js,jsx}','./app/**/*.{js,jsx}','./src/**/*.{js,jsx}',
]

tailwind 使用?fast-glob?庫來匹配文件。其中，*?匹配任意字符，**?匹配 0 個或者多個目錄，{js, jsx}?匹配多個值。

配置完之后的文件數量越多，編譯時的壓力就越大，因此我們應該盡可能縮小 tailwindcss 的配置范圍，只在需要它的地方使用。例如?utils?目錄可能會包含大量的文件，但是不會使用 tailwindcss，那么我們就應該把他剔除掉。

當然我們還可以做其他的一些配置增強，但是大多都沒什么用，對我來說，這里一個比較有用的配置項是?transform。我寫的文章內容，源文件是?.md?格式，此時如果我想要在?.md?中使用 tailwindcss，那么就需要將其轉換為?html?之后再適配 tailwindcss，我們就可以這樣配置

const?remark?=?require('remark')module.exports?=?{content:?{files:?['./src/**/*.{html,md}'],transform:?{md:?(content)?=>?{return?remark().process(content)}}},//?...
}

theme

theme 字段的配置是我們拿捏 tailwindcss 的核心關鍵。我們可以通過這個字段自定義任意語法。但是這個語法新人玩家容易看不懂，一長串不知道如何使用。我給大家講解一下很快就很搞懂了

首先，theme?中包含了大量的字段，這些字段有?colors，textColor，這個是啥意思呢？就很迷惑。

?
我們可以在這個地址中，查看默認的完整配置項 https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js#L5

其實，我們只需要利用好官方文檔，就能很輕松的搞懂這些配置。theme 中的字段主要分為兩類，一類表示 css 屬性。一類表示配置。

例如在配置文件中，有一個?borderWidth的配置如下

borderWidth:?{DEFAULT:?'1px',0:?'0px',2:?'2px',4:?'4px',8:?'8px',
},

這看上去像是一個 css 屬性，又像是一個配置項，那么我們可以去官方文檔的如下地址中，直接查這個單詞. 點開之后發現，這里確實是一個屬性值。并且具體的縮寫與寫法，配置參數都一目了然，比只看官方文檔更加具體。

又例如，我們在配置項中發現了一個屬性?spacing

spacing:?{px:?'1px',0:?'0px',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',
},

然后對應去官方文檔查一下，發現這是一個配置項。那么我們就可以知道，這可能會作為入參運用到其他屬性的設置中去。

?
我們也可以自己定義非 rem 的屬性單位，使用數組遍歷的方式生成 1px -> 500px 中比較常用的一些數值，具體要結合實際情況和設計規范來約定它的配置

有了這個配置項之后，我們就可以使用它作為入參去配置其他 css 屬性，例如 margin 值。這里的?theme?表示一個 get 方法，可以獲取到?theme?配置項中對應屬性的具體值。例如這里的?theme('spacing')?就是獲取到我們剛才的配置項

margin:?({?theme?})?=>?({auto:?'auto',...theme('spacing'),
}),

這樣，margin 寫法后面跟的數字，就是我們約定的?spacing?中具體的值了。

m-0.5?，對應的值，就是?spacing?中的?0.5:0.125rem

theme 中的大多數屬性值，都是 css 屬性值，只有少數幾個值是表示配置項，具體內容不用刻意去記憶，只需要在用到的時候查閱文檔即可。如果你只是需要做簡單粗暴的自定義修改，直接在默認配置的基礎之上修改樣式就可以

1

定義自己喜歡的語法

自定義語法更好的方式是使用?extend?配置去覆蓋原有配置項。例如，我想要重新針對?background-color?定義一個語法寫法如下，使用黑色的拼音縮寫來表達顏色，使用數字來表示不同程度的黑色

bg-heise-0
bg-heise-1
bg-heise-2
bg-heise-3
bg-heise-4

首先我們要做的第一件事情，是在官方文檔中，找到?background color?對應的縮寫是什么

然后在 extend 字段中，對應的字段里，配置自定義的語法，heise.

theme:?{extend:?{backgroundColor:?{heise:?{0:?'rgba(0,?0,?0,?0)',1:?'rgba(0,?0,?0,?0.1)',2:?'rgba(0,?0,?0,?0.2)',3:?'rgba(0,?0,?0,?0.3)',4:?'rgba(0,?0,?0,?0.4)',},

此時，我們的語法就是屬性縮寫開頭的方式，?bg-heise-0，我們可以看到，在文件中使用改語法時，智能提示已經有了我們自己定義的語法，完美！

2

定義自己想要的功能塊

tailwindcss 有三個模塊。

@tailwind?base;
@tailwind?components;
@tailwind?utilities;

base 表示樣式重置模塊。components 表示組件模塊，utilities 表示功能模塊，我們可以通過插件的形式，往這幾個功能模塊中新增我們想要的功能塊。

例如，我希望自定義默認的 button 元素的樣式，那么我們就可以往 base 模塊中注入樣式，首先引入插件方法

const?plugin?=?require('tailwindcss/plugin')

然后在?plugins?字段中新增配置樣式

module.exports?=?{plugins:?[plugin(function({?addBase,?theme?})?{addBase({'button':?{?color:?theme('colors.orange.700')?}})})]
}

然后，我在項目中寫上如下代碼，對應的結果如圖所示，文字顏色變成了?orange.700

<button>自定義button默認樣式</button>

我們可以通過這中方式約定所有的基礎樣式，button, input?等都非常需要這樣的約定。

當然，我們也可以通過類似的方式往?components?中新增樣式。例如我希望新增一個?card?組件，用于表示一個區域的容器，那么我就可以這樣寫

plugin(({addComponents,?theme})?=>?{addComponents({'.card':?{display:?'inline-block',padding:?'1rem',border:?'1px?solid',borderRadius:?'4px',borderColor:?theme('colors.red.400'),margin:?'1rem'}})
}),

然后我在項目中編寫如下代碼

<div?className='card'><button>自定義button默認樣式</button>
</div>

給力！

3

定義自己想要的插件

如下圖所示，此時我們想要實現的一個功能是自定義字體大小的遞增序列。具體的編號和對應的值都由我們自己來定?fsize-12，而不是通過默認的?text-xxx?來約定。

首先，我們先在 theme 中約定配置項，數量太多的時候，你也可以通過數組遍歷來快速創建

theme:?{fsizes:?{12:?'12px',14:?'14px',16:?'16px',18:?'18px',24:?'24px',32:?'32px',},...

然后，plugins 字段中，使用?matchUtilities?方法動態匹配后綴自增的 class

plugin(({matchUtilities,?theme})?=>?{matchUtilities({fsize:?(value)?=>?({fontSize:?value})},?{values:?theme('fsizes')})
})

搞定，最后的演示結果如圖所示

4

高級用法：簡單實現皮膚切換

最后，我們再來一個具體的，實用功能的實現：皮膚切換。具體的實現方式仍然是利用 css 自定義變量來做到。

實現效果如圖所示

?
主題來源于 tailwindcss 官方教學視頻

我們來看一下實現步驟。

首先，我們要在入口 css 中文件中，約定不同主題的 css 變量。

@layer?base?{:root?{--color-text-base:?#FFF;--color-text-muted:?#c7d2f7;--color-text-inverted:?#4f46e5;--color-fill:?#4338ca;--color-button-accent:?#FFF;--color-button-accent-hover:?#eef2ff;--color-button-muted:?99,?102,?241;}.theme-swiss?{--color-text-base:?#FFF;--color-text-muted:?#fecaca;--color-text-inverted:?#dc2626;--color-fill:?#b91c1c;--color-button-accent:?#FFF;--color-button-accent-hover:?#fef2f2;--color-button-muted:?239,?68,?68;}.theme-neon?{--color-text-base:?#111802;--color-text-muted:?#2fc306;--color-text-inverted:?#ebfacc;--color-fill:?#b3ff17;--color-button-accent:?#243403;--color-button-accent-hover:?#374f05;--color-button-muted:?212,?255,?122;}
}

@layer base?表示這些定義會運用到 base 模塊中。

定義好了主題之后，我們就需要去?extend?字段中自定義語法。首先是針對于文字顏色字段，該字段在 css 中為 ?color，不過在 tailwind 中，被重新定義了語義，稱之為 text color

因此，我們要使用?textColor?來定義該語法，

extend:?{textColor:?{skin:?{base:?'var(--color-text-base)',muted:?'var(--color-text-muted)',inverted:?'var(--color-text-inverted)',}},

textColor?的對應縮寫為 text，因此最終我們自定義的語法名如下所示

用同樣的方式定義背景顏色

backgroundColor:?{skin:?{fill:?'var(--color-fill)','button-accent':?'var(--color-button-accent)','button-accent-hover':?'var(--color-button-accent-hover)','button-muted':?({opacityValue})?=>?{console.log(opacityValue)if?(opacityValue?!==?undefined)?{return?`rgba(var(--color-button-muted),?${opacityValue})`}return?`rgb(var(--color-button-muted))`},}
},