跳至主要内容

[Tailwind] 客製化-main.css設定

main.css基本介紹​

main.css是引入tailwind css的一支檔案

參考Tailwind CSS/[Tailwind] 環境建立 最基本的內容如下

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;

以下依序介紹main.css內的設定，以及自定義一些class的寫法

＠tailwind​

官方文件提到@tailwind這個語法是用來引入tailwind自己的base,components,utilities（另外還有variants） 使用方法如下，以我們前面建立的資料夾結構會寫在assets/css/main.css中

main.css
/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the hover, focus,
 * responsive, dark mode, and other variants of each class.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind variants;

@layer​

官方文件中寫道，@layer可以自己客製化base,components,utilities。所以@layer後面只能接上這三個字串
在使用@layer 的時候，會自動調客製化內容到對應的位置，而不受順序影響

tip

這邊測試過就算將**@tailwind utilities移動到第一個**，編譯出來的結果也是會在最後面

例如先使用@layer components,接著再使用@layer base。 在編譯的時候，編譯的順序會如下：base > custom base > components > custom components > utilities。
例如我們今天在客製base的時候，我們希望讓h1的文字大小預設就是24px(對應的text-2xl)，那我們就會設定如下：

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  h1 {
    font-size:24px;
  }
}

也可以使用@apply的寫法改寫，上方的設定會跟下方的設定等價

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  h1 {
    @apply text-2xl;
  }
}

@apply​

官方文件中寫到，我們可以使用@apply去將我們目前現存的通用類別(utilities)使用在我們自定義的設定中。 最常使用的時機應該是在使用第三方套件的時候，需要去覆蓋掉改成自己的設定。官方給出的範例如下：

main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
.select2-dropdown {
  @apply rounded-b-lg shadow-md;
}
.select2-search {
  @apply border border-gray-300 rounded;
}
.select2-results__group {
  @apply text-lg font-bold text-gray-900;
}

@apply的!important​

如果有使用@apply並且希望在後面可以加上!important，則會在每一個設定後面加上!important，範例如下：

main.css
/* Input */
.btn {
  @apply font-bold py-2 px-4 rounded !important;
}

擴充tailwind沒有的utilities​

如果今天有tailwind沒有的樣式，自己想要設定的時候，我們通常會放在utilities中，範例如下：

main.css
// ...

@layer utilities{
	.filter-none{
		filter:none;
	}
}

我們首先使用@layer utilities去指定要編譯出來的位置，接著在裡面設定一個class名稱.filter-none，最後設定css樣式

自定義components​

顧名思義我們需要使用@layer components去新增我們要的component。
但是作者自己有建議，都已經使用tailwind這種utilities-first的工具，就是為了減少自己命名以及css的增長。
所以只建議在表單或是按鈕等等這種重複使用性非常高的地方才使用元件(component)的寫法。

以下是一個按鈕元件的範例：

main.css
// ...

@layer components{
	.btn{
		background-color:#333;
		padding:4px 8px;
		border:1px solid purple;
		font-size:20px;
	}
}

如果要建立巢狀結構，不能使用scss的寫法。

雖然有使用scss撰寫的方式，但是很麻煩 >> 參考資料

或是可以使用以下寫法，可以正確運作

main.css
@layer components{
	.card{
		...
	}

	.card .card__header{
		...
	}

	.card .card__body{
		...
	}

	.card .card__footer{
		...
	}
}