深色模式
暫時略過
重復(fù)樣式
如果直接寫數(shù)個相同樣式的內(nèi)容，那么 Tailwind 的內(nèi)容也會重復(fù)數(shù)次
關(guān)于重復(fù)的Tailwind，有幾種處理方式：
- 代碼編輯器的重復(fù)選取
- 使用循環(huán)
- 將需要重復(fù)使用的內(nèi)容提取為組件
- 通過
@layer和@apply關(guān)鍵詞，在less文件中聲明并達(dá)到復(fù)用的效果
官方示例
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-primary {
@apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
}
}
但是官方又不推薦使用 @apply淮韭，因為這樣又違背了 Tailwind 的本質(zhì)，這樣你又要回歸到想獨特的類名，并且 css 文件也越來越大渤早，所以非必要不使用@apply，只給高度重復(fù)的樣式使用
