Question

我一直在阅读 tailwindcss 的文档，但我无法将“tailwind.config.js”文件配置为将自定义颜色属性导出到我的 HTML。有什么我做错了吗？我安装了 tailwind css 2.0 依赖项以及 postcss/autoprefixer。以下是我的 3 个主要文件。我试图让自定义颜色名称“稍微”起作用，但只是没有为我的身体背景着色。想知道我是否在我的 JS 文件中错误地导出了我的模块？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../node_modules/tailwindcss/dist/tailwind.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
    <title>Document</title>
</head>
<body class="bg-slightly-600">
    
    
</body>
</html>


JS:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e'
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;

Answer 1

您不应包含来自 tailwind.css 的 node_modules，而应包含已编译的文件。

假设您有这个基本的应用程序结构

.
├── resources
│   └── input.css
└── index.html

input.css - 包含 Tailwind 预设的文件

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

tailwind.config.js - 无需在任何地方包含。配置文件可能与 Tailwind 版本不同（以下适用于带有 jit mode 的 v.2.2+）

module.exports = {
  mode: 'jit',
  purge: {
     content: [
      './**/*.html' // watch all html files
     ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e'
    },
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

然后运行下一个命令

npx tailwindcss -i ./resources/input.css -o ./public/output.css

此命令将生成 public/output.css 文件，该文件将根据您的配置包含所有已编译的类 - 它应包含 bg-slightly 类

在 index.html 中链接来自公共文件夹的编译文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./public/output.css">
    <title>Document</title>
</head>
<body class="bg-slightly">
    
</body>
</html>

您可以使用 --watch 或 -w 标志启动监视进程并在您进行任何更改时自动重建 CSS：

npx tailwindcss -i ./resources/input.css -o ./public/output.css --watch

更多关于 Tailwind CLI here

Answer 2

此处的路由原因可能是您试图引用不存在的自定义颜色的阴影（即：slightly-600）。

<!DOCTYPE html>
<html lang="en">
<head>
...
</head>
<body class="bg-slightly-600"> # here you are trying to insert the   color `slightly` with shade `600`
    
    
</body>
</html>


JS:

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: '#c44e4e' # but down here, you aren't defining the  shade `600` for slightly
    },
...

所以你可以做两件事之一：

为 600 中的 slightly 定义阴影 tailwind.config.js

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      transparent: 'transparent',
      current: 'currentColor',
      slightly: {
        DEFAULT: '#c44e4e',
        600: # whatever your custom shade is here!
    },
...

或 2. 保持配置不变，但更改 HTML 中的引用，以便引用基色，而不是阴影 600

...
<body class="bg-slightly"> # no reference to 600
...

您可以通过搜索由 tailwinds 生成的 main.css 文件并搜索关键字 slightly-600 来验证此色调是否存在。如果您没有明确定义自定义颜色的阴影，则不会生成。

自定义颜色顺风

2 个答案: