Tailwind CSS 未应用某些样式

Posted 2023-03-07

【中文标题】Tailwind CSS 未应用某些样式

【英文标题】：Tailwind CSS not applying certain styles

【发布时间】：2021-09-09 19:05:48

【问题描述】：

我使用 next.js 文档中提供的 tailwind starter repo 创建了一个 next.js 应用程序，并且 tailwind 运行良好。但是我最近遇到了一个问题，某些顺风类停止工作，特别是与颜色相关的任何类。

我已经尝试再次运行 npm -i，但没有发生任何变化。

postcss.config

// If you want to use other PostCSS plugins, see the following:
// https://tailwindcss.com/docs/using-with-preprocessors
module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,

tailwind.config.js

module.exports = 
  mode: 'jit',
  purge: ['./pages/**/*.js,ts,jsx,tsx', './components/**/*.js,ts,jsx,tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: 
    colors:
      transparent:"transparent",
      current:"currentColor",
      primary:
        superlight:"#FFFFFF",
        light:"#FFF8F0",
        DEFAULT:"#FFEBD1",
        dark:"#978F85"
      ,
      secondary:
        light:"#EFEFEF",
        DEFAULT:"#A0A0A0",
        dark:"#26221D"
      
  ,
    extend: ,
  ,
  variants: 
    extend: ,
  ,
  plugins: [],

_app.js

import 'tailwindcss/tailwind.css';

function MyApp( Component, pageProps ) 
  return <Component ...pageProps />


export default MyApp

【问题讨论】：

只有您在theme.colors 中定义的颜色可供您使用。如果您想扩展默认颜色，请改用theme.extend.colors。

您正在使用jit 模式。所以你在观察变化吗？如果您看不到新添加的类在起作用，则您的输出 css 文件不包含这些 css 类。因此，您需要在每次更改后手动查看更改或编译您的 css。此外，您不是在扩展主题颜色，而是在覆盖它们。这是另一个问题。

【参考方案1】：

你需要extend主题，不要覆盖它。

module.exports = 
  mode: "jit",
  purge: ["./pages/**/*.js,ts,jsx,tsx", "./components/**/*.js,ts,jsx,tsx"],
  darkMode: false, // or 'media' or 'class'
  theme: 
    extend: 
      colors: 
        transparent: "transparent",
        current: "currentColor",
        primary: 
          superlight: "#FFFFFF",
          light: "#FFF8F0",
          DEFAULT: "#FFEBD1",
          dark: "#978F85"
        ,
        secondary: 
          light: "#EFEFEF",
          DEFAULT: "#A0A0A0",
          dark: "#26221D"
        
      
    
  ,
  variants: 
    extend: 
  ,
  plugins: []
;

另外，请记住，JIT 模式仍然不是完全没有错误的。如果您再次遇到类似问题，请尝试重新启动服务器。