Блог

Главная - Вопросы по программированию - CSS попутного ветра, не применяющий определенные стили

CSS попутного ветра, не применяющий определенные стили

#next.js #tailwind-css

Вопрос:

Я создал next.js приложение с использованием стартового репо tailwind, предоставленного в 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

Комментарии:

1. theme.colors Вам будут доступны только те цвета, которые вы определяете. Если вы хотите расширить цвета по умолчанию, используйте theme.extend.colors вместо этого.

2. Вы используете 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 все еще не полностью свободен от ошибок. Если у вас снова возникнут подобные проблемы, попробуйте перезагрузить сервер.

Метки: ,