介紹
Tailwind CSS是高度可定製的CSS框架，可提供構建定製設計所需的所有構建基本模塊，而無需煩惱要固定的使用某一些樣式，這其實就是因為大多數CSS框架做得太多，它們帶有各種預先設計的組件，例如Button、Card和Alert，它們一開始可能會幫助你提升開發效率，但是當使您的網站以自定義設計脫穎而出時，它們所帶來的痛苦真的會讓人受不了！Tailwind 作為css的設計引擎，定能解決這樣的煩惱
Github地址
https://github.com/tailwindcss/tailwindcss
為什麼使用Tailwind.css?
Tailwind提供了底層實用程序類，而不是預先設計好的組件，可讓您構建完全自定義的設計而無需離開HTML。如果您厭倦了與框架自帶的樣式改寫不需要的樣式以及與特定性作鬥爭，那麼Tailwind就是為您準備的
標題等等
段落內容
響應式的核心
每個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來看，其受歡迎程度來說自然時不言而喻！
閱讀更多 最美分享Coder 的文章
