Tailwind 自定义主题和 @apply 类答案

【问题标题】：Tailwind custom themes and @apply classesTailwind 自定义主题和 @apply 类
【发布时间】：2021-12-06 15:48:07
【问题描述】：

我在编译 CSS 时遇到了一些问题。我在我的 index.css 文件中创建了 3 个自定义类，并且还为一些更长的类使用了 @apply。

@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";
    }
}

在我的 css 文件中，我在哪里编写使用 @apply 的类？我的 @apply 类都使用我的自定义主题中的颜色变量，如下所示：

.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-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;
    }

我的顺风配置文件：

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)",
        }
      }
    },
  },

提前致谢！

【问题讨论】：

标签： css vuejs3 tailwind-css

【解决方案1】：

找出问题我在十六进制颜色代码周围有一些额外的括号

: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";
    }

--key-shadow: "#b4a597";应该是 --key-shadow: #b4a597;.

【讨论】：