Tailwind CSS - 函式與指令

上一個
下一個

指令在 Tailwind CSS 中是用於在 CSS 中應用或自定義樣式的命令。

指令是您在 CSS 中使用的Tailwind CSS 命令，用於訪問特殊功能並控制 Tailwind CSS 應用的樣式。

@tailwind

@tailwind 指令允許您將 Tailwind 的基礎樣式、元件、實用程式和變體直接包含到您的 CSS 中。

示例

/**
 * Inserts Tailwind's foundational styles and any additional base styles from plugins.
 */
@tailwind base;

/**
 * Includes Tailwind's component styles and any extra component styles from plugins.
 */
@tailwind components;

/**
 * Adds Tailwind's utility classes and any additional utility classes from plugins.
 */
@tailwind utilities;

/**
 * Controls the placement of variant styles (like hover, focus, and responsive) in your CSS.
 * If not specified, these variants are added at the end of your stylesheet by default.
 */
@tailwind variants;

@layer

@layer 指令允許您指定自定義樣式在 Tailwind 中屬於哪個類別（基礎、元件或實用程式）。

示例

/**
 * Import Tailwind's base styles, component styles, and utility classes into your CSS.
 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/**
 * Define custom base styles for HTML elements using the base layer.
 */
@layer base {
  h1 {
    @apply font-bold text-3xl; /* Applies a bold font and large size to h1 elements */
  }
  h2 {
    @apply font-semibold text-2xl; /* Applies a semi-bold font and medium size to h2 elements */
  }
}

/**
 * Create custom component styles using the components layer.
 */
@layer components {
  .card {
    @apply bg-gray-100 border border-gray-300 p-4 rounded-lg shadow-md; /* Styles for a card component */
  }
}

/**
 * Add custom utility classes using the utilities layer.
 */
@layer utilities {
  .no-opacity {
    opacity: 1; /* Sets the element's opacity to fully opaque */
  }
  .blurred {
    filter: blur(5px); /* Applies a blur effect to elements */
  }
}

Tailwind 會自動在@layer 指令中組織 CSS 以匹配@tailwind規則的順序，因此您無需擔心順序以避免特異性問題。

這些層中的自定義 CSS 僅在 HTML 中使用時才會包含在最終構建中，就像預設的 Tailwind 類一樣。

此外，使用@layer 允許您將修飾符（如懸停、焦點）和響應式斷點（如md: 和lg:）應用到您的自定義樣式。

@apply

@apply 允許您將現有的實用程式類直接包含到您的自定義 CSS 中。

如果您希望在編寫自己的 CSS 時使用 Tailwind 的樣式，這將非常有用，從而更容易自定義或覆蓋來自其他來源的樣式。

示例

.custom-card {
    @apply rounded-lg shadow-lg;
}
.custom-input {
    @apply border border-gray-400 rounded-md;
}
.custom-header {
    @apply text-xl font-semibold text-gray-800;
  }

當您使用@apply 時，預設情況下會刪除任何!important宣告以防止與其他 CSS 規則衝突。以下是它的工作原理。

示例


/* Define a class with !important */
.text-red {
  color: red !important;
}

/* Apply the .text-red class to another class */
.alert {
  @apply text-red;
}

 
/* The .text-red class retains the !important declaration */
.text-red {
  color: red !important;
}

/* The .alert class does not include !important */
.alert {
  color: red;
}

如果您想使用@apply包含來自現有類的樣式並確保它們是!important，則需要在自定義 CSS 中每個屬性的末尾顯式新增!important。

    /* The .card class without !important */
.card {
  padding: 1rem;
  background-color: #edf2f7;
  border: 1px solid #cbd5e0;
  border-radius: .375rem;
}

/* The .card-important class with !important */
.card-important {
  padding: 1rem !important;
  background-color: #edf2f7 !important;
  border: 1px solid #cbd5e0 !important;
  border-radius: .375rem !important;
}

要使用@apply應用!important，請在每個屬性中新增!important。Sass/SCSS，請使用這種方法包含!important

/* Apply !important using Sass variable */
.card-important {
    @apply p-4 bg-gray-200 border border-gray-400 rounded;
    @apply #{$important}; /* Applies !important */
}

在每個元件的 CSS 中使用 @apply

在Vue 和Svelte 等框架中，您可以將樣式直接包含在每個元件檔案內的<style>塊中。

嘗試在Vue 或Svelte 等框架中的<style>塊內使用來自全域性 CSS 的自定義類會導致錯誤，因為它找不到該類。

示例 :main.css

    
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .button {
      background-color: theme('colors.blue.500');
      border-radius: theme('borderRadius.md');
      padding: theme('spacing.4');
      color: theme('colors.white');
    }
}

示例 :Card.svelte

    
<button>
    <slot></slot>
</button>

<style>
    button {
        /* This won't work because Button.svelte and main.css are processed separately */
        @apply button;
    }
</style>

在此示例中，.button 在 main.css 中定義，但Button.svelte 中的@apply不起作用，因為每個檔案都是單獨處理的。Vue 和Svelte獨立處理它們的<style>塊，因此它們無法直接使用來自全域性 CSS 的樣式。

當你有多個元件，每個元件都有自己的<style>塊時，Tailwind 會分別處理每個檔案。例如，如果你在main.css中定義了一個.button類，但嘗試在Button.svelte中使用@apply button，它將無法工作。這是因為 Tailwind 會獨立處理Button.svelte和main.css，所以在Button.svelte中使用.button類時，它無法識別該類。

不要嘗試跨檔案使用@apply，而是在Tailwind 的配置中直接定義你的樣式。以下是方法。

示例

    
const plugin = require('tailwindcss/plugin')

module.exports = {
    // ...
    plugins: [
        plugin(function ({ addComponents, theme }) {
            addComponents({
              '.button': {
                backgroundColor: theme('colors.blue.500'),
                borderRadius: theme('borderRadius.md'),
                padding: theme('spacing.4'),
                boxShadow: theme('boxShadow.md'),
                color: theme('colors.white'),
              }
            })
        })
    ]
}

透過這樣做，任何 Tailwind CSS 檔案都可以訪問.button類。

為了獲得更流暢的體驗，最好直接在 HTML 中使用Tailwind 的實用程式類，而不是依賴於跨檔案的@apply。這種方法簡化了你的設定並避免了複雜情況。

@config

@config 指令告訴 Tailwind CSS 在處理特定 CSS 檔案時使用哪個配置檔案。如果你專案的不同部分使用了不同的配置檔案，這將非常有用。

在site.css中，你可能會使用預設配置。

示例

@config "./tailwind.site.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

在admin.css中，你可以使用以下方式指定不同的配置檔案：

示例

@config "./tailwind.admin.config.js";

@tailwind base;
@tailwind components;
@tailwind utilities;

你在@config指令中指定的路徑相對於 CSS 檔案本身，並將覆蓋你在 PostCSS 設定或 Tailwind CLI 中設定的任何配置。

當使用 Tailwind CSS 與postcss-import時，請確保所有@import語句都位於 CSS 檔案中@config指令之前。

為什麼？postcss-import需要先處理@import語句，遵循 CSS 規則，這些規則要求匯入出現在任何其他規則之前。如果你將@config放在@import語句之前，會導致問題，你的樣式可能無法正確處理。

示例：錯誤順序

/* Incorrect order - will cause problems */
@config "./tailwind.admin.config.js";

@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

示例：正確順序

/* Always put @import first */
@import "tailwindcss/base";
@import "./custom-base.css";
@import "tailwindcss/components";
@import "./custom-components.css";
@import "tailwindcss/utilities";

@config "./tailwind.admin.config.js";

函式

使用 Tailwind，你可以在 CSS 中使用自定義函式來訪問Tailwind 特定的值。這些函式在構建時計算，並在最終 CSS 中轉換為靜態值。

@theme

要訪問Tailwind 配置中的值，只需使用帶點表示法的theme()函式即可。

示例

.button {
  border-width: theme(borderWidth.md);
}

如果需要使用帶點的值（如邊框寬度比例中的 3.5），請使用方括號

示例

.button {
  border-width: theme(borderWidth[3.5]);
}

要訪問Tailwind 預設調色盤中的巢狀顏色，請使用點表示法以確保正確引用顏色值。

避免對巢狀顏色值使用連字元。

示例

    /* Incorrect */
.button {
    background-color: theme(colors.green-500);
}

使用點來訪問巢狀顏色值。

示例

   /* Correct */
.button {
    background-color: theme(colors.green.500);
}

要更改主題顏色的不透明度，請新增一個斜槓，後跟不透明度百分比

示例

.card-bg {
    background-color: theme(colors.green.300 / 50%);
}

@screens

Tailwind CSS 中的screen()函式允許你使用命名斷點建立媒體查詢，避免在 CSS 中重複值。

示例

@media screen(md) {
    /* Styles for medium screens and up */
}

在構建 CSS 時，這將轉換為指定斷點的標準媒體查詢。

示例

@media (min-width: 768px) {
    /* Styles for screens that are at least 768px wide */
}

@screens

Tailwind CSS 中的screen()函式可幫助你使用命名斷點建立媒體查詢，而不是在 CSS 中重複其值。

示例

@media screen(md) {
    /* Styles for medium screens and up */
}

在構建 CSS 時，這將轉換為指定斷點的標準媒體查詢。

示例

@media (min-width: 768px) {
    /* Styles for screens that are at least 768px wide */
}
列印頁面
上一頁
下一頁
廣告