如何将 Tailwind CSS 配置文件连接到我的 HTML？

Question

我正在尝试在我的 html 文件中使用自定义颜色，但是 tailwind.config.js 似乎无法连接。我将内容配置为“./*.html”，因此它会在根目录中查找所有内容。我的 HTML 文件在我的根目录中所以有人知道哪里出了问题吗？

```
module.exports = {
  content: ['./*.html'],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px"
    },
    extend: {
      brightRed: "hsl(12, 88%, 59%)",
      brightRedLight: "hsl(12, 88%, 69%)",
      brightRedSupLight: "hsl(12, 88%, 95%)",
      darkBlue: "hsl(228, 39%, 23%)",
      darkGrayishBlue: "hsl(227, 12%, 61%)",
      veryDarkBlue: "hsl(233, 12%, 13%)",
      veryPaleRed: "hsl(13, 100%, 96%)",
      veryLightGray: "hsl(0, 0%, 98%)",
    },
  },
  plugins: [],
}
```

Answer 1

您需要将其添加到颜色部分。将其更改为此应该可以解决您的问题。

module.exports = {
  content: ['./*.html'],
  theme: {
    screens: {
      sm: "480px",
      md: "768px",
      lg: "976px",
      xl: "1440px"
    },
    colors: {
      brightRed: "hsl(12, 88%, 59%)",
      brightRedLight: "hsl(12, 88%, 69%)",
      brightRedSupLight: "hsl(12, 88%, 95%)",
      darkBlue: "hsl(228, 39%, 23%)",
      darkGrayishBlue: "hsl(227, 12%, 61%)",
      veryDarkBlue: "hsl(233, 12%, 13%)",
      veryPaleRed: "hsl(13, 100%, 96%)",
      veryLightGray: "hsl(0, 0%, 98%)",
    },
  },
  plugins: [],
}

从那里您可以指定不同的版本。喜欢 100, 200, 300 通过添加这样的东西。

      'tahiti': {
        100: '#cffafe',
        200: '#a5f3fc',
        300: '#67e8f9',
        400: '#22d3ee',
        500: '#06b6d4',
        600: '#0891b2',
        700: '#0e7490',
        800: '#155e75',
        900: '#164e63',
      },

这完全是顺风文档 here 希望这有帮助

如何将 Tailwind CSS 配置文件连接到我的 HTML？

How to get Tailwind CSS to config file to connect to my HTML?

html

implementation

tailwind-css