介紹
Tailwind css是高度可定制的CSS框架，可提供構建定制設計所需的所有構建基本模塊，而無需煩惱要固定的使用某一些樣式，這其實就是因為大多數CSS框架做得太多，它們帶有各種預先設計的組件，例如Button、Card和Alert，它們一開始可能會幫助你提升開發效率，但是當使您的網站以自定義設計脫穎而出時，它們所帶來的痛苦真的會讓人受不了！Tailwind 作為css的設計引擎，定能解決這樣的煩惱
Github地址
https://github.com/tailwindcss/tailwindcss
為什么使用Tailwind.css?
Tailwind提供了底層實用程序類，而不是預先設計好的組件，可讓您構建完全自定義的設計而無需離開html。如果您厭倦了與框架自帶的樣式改寫不需要的樣式以及與特定性作斗爭，那么Tailwind就是為您準備的
<div class="md:flex"> <div class="md:flex-shrink-0"> <img class="rounded-lg md:w-56" src="photo-1556740738-b6a63e27c4df" alt="Woman paying for a purchase"> </div> <div class="mt-4 md:mt-0 md:ml-6"> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">標題等等</div> <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a> <p class="mt-2 text-gray-600">段落內容</p> </div> </div>
響應式的核心
每個Tailwind還帶有響應變體，這使得在不借助自定義CSS的情況下構建響應接口變得極為容易。Tailwind使用直觀的{screen}：前綴，可以輕松注意到標記中的響應類，同時保持原始類名可識別和完整。
友好的組件
盡管僅使用實用程序類可以做很多事情，但是隨著項目的發展，將通用模式編碼為更高級別的抽象可能會很有用。Tailwind提供了用于從重復的實用程序模式中提取組件類的工具，從而可以輕松地從一個位置更新組件的多個實例：
設計可定制
可以使用Tailwind對其進行自定義。這包括顏色，邊框大小，字體粗細，間距實用程序，斷點，陰影以及更多其他內容。Tailwind用PostCSS編寫并用JAVAScript配置，這意味著您唾手可得真正的編程語言的全部功能。Tailwind不僅是CSS框架，還是創建設計系統的引擎
// tailwind.config.js
module.exports = {
theme: {
screens: {
tablet: '768px',
desktop: '1024px',
},
colors: {
primary: {
100: '#ebf8ff',
300: '#90cdf4',
500: '#4299e1',
700: '#2b6cb0',
900: '#2a4365',
},
secondary: {
100: '#fffff0',
300: '#faf089',
500: '#ecc94b',
700: '#b7791f',
900: '#744210',
},
},
extend: {
boxShadow: {
huge: '0 30px 60px -15px rgba(0, 0, 0, .25)'
}
}
}
}
安裝和使用
- 通過npm安裝Tailwind
對于大多數項目（并利用Tailwind的自定義功能），需要通過npm安裝Tailwind
# 使用 npm npm install tailwindcss # 使用 Yarn yarn add tailwindcss
- 將Tailwind添加到CSS
使用@tailwind指令為注入
@tailwind base; @tailwind components; @tailwind utilities;
Tailwind將在構建時將其替換為所有生成的CSS，如果正在使用postcss-import（或在后臺使用其它的工具，例如Webpacker for Rails），請使用import而不是@tailwind偽指令來避免在導入任何其他文件時出現問題：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
除以上介紹，則還包括了其它的配置等，官方提供了非常詳細的使用文檔，感興趣的可以直接查看文檔
tailwindcss設計引擎包括了很多功能，相信它會讓你感興趣
總結
本文對Tailwind.css的介紹不夠詳細，因其內容和功能非常豐富，當你看到它時相信你會對它感興趣，而且從其Github的star數17.3k來看，其受歡迎程度來說自然時不言而喻！
