javascript - 添加属性后 Tailwind CSS 无法正确构建

Question

我正在尝试使用 Tailwind 构建我的 CSS 文件。我添加了我想要的颜色vlteal，我希望它显示在我的style.css. 我已将它添加到 mytailwind.config.js和 myindex.css中，我正在构建 Tailwind 输出 , style.css。

tailwind.config.js：

module.exports = {
    theme: {
        screens: {
            sm: '640px',
            md: '768px',
            lg: '1024px',
            xl: '1280px',
        },
        fontFamily: {
            display: ['Bahnschrift', 'sans-serif'],
            body: ['Barlow', 'sans-serif'],
            h1: ['Barlow', 'sans-serif', 'bold-700']
        },
        borderWidth: {
            default: '1px',
            '0': '0',
            '2': '2px',
            '4': '4px',
        },
        extend: {
            colors: {
                baseteal: '#9cdbff',
                dlteal: '#4796a1',
                lteal: '#5EA6B0',
                textteal: '#0C3C3F',
                ddteal: '#003333',
                vlteal: {
                DEFAULT: '#18CCCC',
                '50': '#D0F9F9',
                '100': '#B9F7F7',
                '200': '#8CF1F1',
                '300': '#5EECEC',
                '400': '#30E7E7',
                '500': '#18CCCC',
                '600': '#139E9E',
                '700': '#0D7171',
                '800': '#084343',
                '900': '#031515'
                },
            },
        }
    }
}

我的源 CSS 如下所示：

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

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
  font-family: Bahnschrift;
  src: url("../fonts/bahnschrift.TTF");
}

@font-face {
  font-family: Barlow;
  src: url("../fonts/barlow.ttf");
}

.lteal {
  color: #5ea6b0;
}

.dlteal {
  color:#4796a1;
}

.vlteal {
  color: #18CCCC;
}

#fill{
  -webkit-text-fill-color: #ffffff;
}
.parallax{
    background-image: url("/edupodevhs.github.io/images/LogoMic");
    min-height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
}

我的构建命令如下： npx tailwindcss build css/index.css -o style.css

在添加vlteal并运行构建命令之前，一切正常。现在，当我尝试加载使用style.css. 我究竟做错了什么？

标签： javascripthtmlcssnpmtailwind-css