tailwind默认背景颜色在一个新项目中不起作用

发布于 2025-02-10 00:49:14 字数 688 浏览 2 评论 0原文

我已经在一个新项目中安装了tail风，似乎工作正常。当我尝试将背景黑色应用于身体时，它起作用了：

<body class="bg-black">

但是，当我尝试应用另一种默认颜色时，它不起作用：

<body class="bg-slate-500">

为什么？如何将默认的颜色Parete添加到BG实用程序类中？

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      
    },
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

尾风3.1.4 这是项目repo

原文

I've installed tailwind in a new project and seems work fine. When I try to apply a background black color to the body it works:

<body class="bg-black">

But when I try to apply another default color it doesn't work:

<body class="bg-slate-500">

Why? How can I add the default color palete to bg utility classes?

//tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    colors: {
      
    },
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

Tailwind 3.1.4
Here is the project repo

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

简单爱 2025-02-17 00:49:15

尝试使用className而不是class

回复收藏 0 原文

没有心的人 2025-02-17 00:49:15

为了摆脱弃用的警告，您可以手动删除弃用的颜色：

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

delete colors['lightBlue'];
delete colors['warmGray'];
delete colors['trueGray'];
delete colors['coolGray'];
delete colors['blueGray'];

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'media',
  theme: {
    extend: {
      colors
    },
  },
  plugins: [],
};

To get rid of deprecated warnings, you may manually remove deprecated colors:

/** @type {import('tailwindcss').Config} */

const colors = require('tailwindcss/colors')

delete colors['lightBlue'];
delete colors['warmGray'];
delete colors['trueGray'];
delete colors['coolGray'];
delete colors['blueGray'];

module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  darkMode: 'media',
  theme: {
    extend: {
      colors
    },
  },
  plugins: [],
};

回复收藏 0 原文

神魇的王 2025-02-17 00:49:14

您要么定义一个颜色对象，该对象可以选择所需的/需要哪种调色板，要么在tailwind.config.js中简单地导入默认颜色。

config.colors = require('tailwindcss/colors')

https://tailwindcss.com/docs/customizing-colors#using-默认违规曲

按要求更新2

，我包括一个完整的示例，说明在何处将导入的颜色包含在尾风CSS配置文件中。

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

You'll want to either define a colors object that pick which color palettes you want/need or simply import the default colors in your tailwind.config.js.

config.colors = require('tailwindcss/colors')

https://tailwindcss.com/docs/customizing-colors#using-the-default-colors

Update 2

As asked, I'm including a full example of where to include the imported colors in the Tailwind CSS config file.

/** @type {import('tailwindcss').Config} */
const colors = require('tailwindcss/colors')

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography'),
  ],
}

回复收藏 0 原文

~没有更多了~