介紹
Tailwind css是高度可定制的CSS框架，可提供構(gòu)建定制設(shè)計(jì)所需的所有構(gòu)建基本模塊，而無需煩惱要固定的使用某一些樣式，這其實(shí)就是因?yàn)榇蠖鄶?shù)CSS框架做得太多，它們帶有各種預(yù)先設(shè)計(jì)的組件，例如Button、Card和Alert，它們一開始可能會(huì)幫助你提升開發(fā)效率，但是當(dāng)使您的網(wǎng)站以自定義設(shè)計(jì)脫穎而出時(shí)，它們所帶來的痛苦真的會(huì)讓人受不了！Tailwind 作為css的設(shè)計(jì)引擎，定能解決這樣的煩惱
Github地址
https://github.com/tailwindcss/tailwindcss
為什么使用Tailwind.css?
Tailwind提供了底層實(shí)用程序類，而不是預(yù)先設(shè)計(jì)好的組件，可讓您構(gòu)建完全自定義的設(shè)計(jì)而無需離開html。如果您厭倦了與框架自帶的樣式改寫不需要的樣式以及與特定性作斗爭(zhēng)，那么Tailwind就是為您準(zhǔn)備的
<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">標(biāo)題等等</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">段落內(nèi)容</p> </div> </div>
響應(yīng)式的核心
每個(gè)Tailwind還帶有響應(yīng)變體，這使得在不借助自定義CSS的情況下構(gòu)建響應(yīng)接口變得極為容易。Tailwind使用直觀的{screen}：前綴，可以輕松注意到標(biāo)記中的響應(yīng)類，同時(shí)保持原始類名可識(shí)別和完整。
友好的組件
盡管僅使用實(shí)用程序類可以做很多事情，但是隨著項(xiàng)目的發(fā)展，將通用模式編碼為更高級(jí)別的抽象可能會(huì)很有用。Tailwind提供了用于從重復(fù)的實(shí)用程序模式中提取組件類的工具，從而可以輕松地從一個(gè)位置更新組件的多個(gè)實(shí)例：
設(shè)計(jì)可定制
可以使用Tailwind對(duì)其進(jìn)行自定義。這包括顏色，邊框大小，字體粗細(xì)，間距實(shí)用程序，斷點(diǎn)，陰影以及更多其他內(nèi)容。Tailwind用PostCSS編寫并用JAVAScript配置，這意味著您唾手可得真正的編程語言的全部功能。Tailwind不僅是CSS框架，還是創(chuàng)建設(shè)計(jì)系統(tǒng)的引擎
// 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
對(duì)于大多數(shù)項(xiàng)目（并利用Tailwind的自定義功能），需要通過npm安裝Tailwind
# 使用 npm npm install tailwindcss # 使用 Yarn yarn add tailwindcss
- 將Tailwind添加到CSS
使用@tailwind指令為注入
@tailwind base; @tailwind components; @tailwind utilities;
Tailwind將在構(gòu)建時(shí)將其替換為所有生成的CSS，如果正在使用postcss-import（或在后臺(tái)使用其它的工具，例如Webpacker for Rails），請(qǐng)使用import而不是@tailwind偽指令來避免在導(dǎo)入任何其他文件時(shí)出現(xiàn)問題：
@import "tailwindcss/base"; @import "tailwindcss/components"; @import "tailwindcss/utilities";
除以上介紹，則還包括了其它的配置等，官方提供了非常詳細(xì)的使用文檔，感興趣的可以直接查看文檔
tailwindcss設(shè)計(jì)引擎包括了很多功能，相信它會(huì)讓你感興趣
總結(jié)
本文對(duì)Tailwind.css的介紹不夠詳細(xì)，因其內(nèi)容和功能非常豐富，當(dāng)你看到它時(shí)相信你會(huì)對(duì)它感興趣，而且從其Github的star數(shù)17.3k來看，其受歡迎程度來說自然時(shí)不言而喻！
