Tailwind自定义主题下@apply类书写位置及CSS编译问题咨询

自定义@apply类的正确存放位置 #

你写的这些自定义类属于可复用的组件级样式，需要放在@layer components 代码块中，插入位置在现有@layer base块之后、@tailwind utilities 声明之前即可。
完整的CSS文件结构如下：

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

@font-face {
    font-family: "Spartan";
    src: url('/fonts/static/Spartan-Bold.ttf') format("truetype");
}

@layer base {
    /* 原有主题变量定义，注意要把颜色值外的引号删掉，否则变量不生效 */
    :root {
        --main: #3a4764;
        --keypad: #232c43;
        --screen: #182034;
        --key-blue: #637097;
        --key-shadow-blue: #404e72;
        --key-red: #d03f2f;
        --key-shadow-red: #93261a;
        --key: #eae3dc;
        --key-shadow: #b4a597;
        --text-dark: #444b5a;
        --text-white: #ffffff;
    }

    .themeLight {
        --main: #e6e6e6;
        --keypad: #d1cccc;
        --screen: #ededed;
        --key-blue: #377f86;
        --key-shadow-blue: #1b5f65;
        --key-red: #ca5502;
        --key-shadow-red: #893901;
        --key: #e5e4e1;
        --key-shadow: #a69d91;
        --text-dark: #35352c;
        --text-white: #ffffff;
    }

    .themeRetro {
        --main: #160628;
        --keypad: #1d0934;
        --screen: #1d0934;
        --key-blue: #58077d;
        --key-shadow-blue: #bc15f4;
        --key-red: #00e0d1;
        --key-shadow-red: #6cf9f2;
        --key: #341c4f;
        --key-shadow: #871c9c;
        --text-light: #ffe53d;
        --text-dark: #1b2428;
        --text-white: #ffffff;
    }
}

/* 新增components层存放自定义类 */
@layer components {
    .key {
        @apply w-1/5 h-1/6 flex justify-center items-center rounded-md border-b-4 pt-2 font-bold text-3xl;
    }

    .keyColor1 {
        @apply border-skin-key-shadow bg-skin-key text-skin-text-dark;
    }

    .keyColor2 {
        @apply border-skin-key-shadow-blue bg-skin-key-blue text-white text-xl;
    }

    .keyColor3 {
        @apply border-skin-key-shadow-red bg-skin-key-red text-white;
    }

    .toggle {
        @apply bg-skin-key-red;
    }
}

额外需要修正的配置问题 #

你当前的Tailwind配置只定义了backgroundColor的皮肤变量，但自定义类中用到了border-*和text-*的皮肤变量，需要补充对应的配置项，修改后tailwind.config的theme部分如下：

theme: {
    extend: {
      backgroundColor: {
        skin: {
          main: "var(--main)",
          keypad: "var(--keypad)",
          screen: "var(--screen)",
          'key-blue': "var(--key-blue)",
          'key-shadow-blue': "var(--key-shadow-blue)",
          'key-red': "var(--key-red)",
          'key-shadow-red': "var(--key-shadow-red)",
          key: "var(--key)",
          'key-shadow': "var(--key-shadow)",
          'text-dark': "var(--text-dark)",
          'text-white': "var(--text-white)",
        }
      },
      // 补充边框颜色配置
      borderColor: {
        skin: {
          'key-shadow': "var(--key-shadow)",
          'key-shadow-blue': "var(--key-shadow-blue)",
          'key-shadow-red': "var(--key-shadow-red)",
        }
      },
      // 补充文字颜色配置
      textColor: {
        skin: {
          'text-dark': "var(--text-dark)",
          'text-white': "var(--text-white)",
          'text-light': "var(--text-light)",
        }
      }
    },
  },

相关说明 #

• 放到@layer components的样式会被Tailwind自动处理，优先级低于工具类，你可以在使用组件类的地方用额外的工具类覆盖样式，符合Tailwind的层级设计规范
• 原有CSS变量里的多余引号必须删除，否则浏览器会将引号识别为颜色值的一部分，导致样式失效

内容的提问来源于stack exchange，提问作者Roman Kolar