自定义颜色顺风

Posted

技术标签:

【中文标题】自定义颜色顺风【英文标题】:customizing color tailwind 【发布时间】:2021-09-08 03:09:59 【问题描述】:

我一直在阅读 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;



【问题讨论】:

我试过了,它仍然是一个白色的空白屏幕。我需要将tailwind 配置文件链接到我的html 文件吗? ..抱歉有点新 【参考方案1】:

您不应包含来自node_modulestailwind.css,而应包含已编译的文件。

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

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

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

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

tailwind.config.js - 无需在任何地方包含。配置文件可能与 Tailwind 版本不同(下面是 v.2.2+ 和 jit mode)

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

【讨论】:

直到现在我才知道 CLI 是什么。哈哈。谢谢Ihar ..想知道作为初学者我将如何破译这样的文档?我发现来自 React 和 Tailwind 的文档并不像人们说的那么简单......尽管 React 被认为拥有最好的文档......我通常会丢失 我主要不使用 Tailwind CLI,我正在使用 poctcss 处理它,但它会很有帮助) 顺便说一句,tailwind 的 CLI 方式似乎没有使用来自我的 styles.css 的 @tailwind 导入。即使文档提到我应该拥有该文件。这就是为什么我很困惑..它提到有一个包含所有 3 个导入的自定义 css 文件但不使用它?【参考方案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
    ,
...

所以你可以做以下两件事之一:

    tailwind.config.js 中为slightly 定义阴影600
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 来验证此颜色阴影是否存在。如果您没有明确定义自定义颜色的明暗度,则不会生成。

【讨论】:

以上是关于自定义颜色顺风的主要内容,如果未能解决你的问题,请参考以下文章

自定义 Tailwind CSS 时引用默认颜色

可以从 CSS 中引用顺风颜色吗?

如果未选中,则对单选按钮进行自定义验证 |顺风

如何在顺风中以自定义高度居中网格行中的元素?

如何为自定义反应应用程序配置设置顺风 css?

在反应中使用顺风 css 为范围滑块添加自定义工具提示