Блог

Главная - Вопросы по программированию - Странный вывод при создании Tailwind через PostCSS (Laravel Mix)

Странный вывод при создании Tailwind через PostCSS (Laravel Mix)

#laravel #laravel-mix #tailwind-css #postcss

#laravel #laravel-mix #tailwind-css #postcss

Вопрос:

Я использую Laravel Mix и PostCSS для создания Tailwind.

Все работает, я даже могу удалить неиспользуемые стили.

У меня странные результаты при сборке (их МНОГО) :

 --tw-space-y-reverse [
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   },
   {
     index: 40,
     token: '-',
     type: 9,
     eval: [Function: sub],
     precedence: 1,
     show: '-'
   }
]

Я использую последнюю версию TailwindCSS.
Вот соответствующая часть моего webpack.mix.js :

 const mix = require('laravel-mix');
require('laravel-mix-purgecss');

let tailwindcss = require('tailwindcss');
mix.postCss('resources/css/tailwind.css', 'public/css/soumettre202101.css', [
  tailwindcss('./tailwind.config.js'),
]);

Я даже не знаю, с чего начать. Я не знаю, что является причиной этого.

Любая зацепка будет оценена!

Я могу удалить вывод, отключив эти основные плагины (в моем tailwind.config.js ) :

 module.exports = {
  corePlugins: {
    space: false,
    ringWidth: false,
    ringColor: false,
    ringOffsetWidth: false,
    ringOffsetColor: false,
    ringOpacity: false,
    divideOpacity: false,
    divideColor: false,
    divideWidth: false,
  }
}

Еще более странно: если я отключу только «пробел», вывод изменится с приведенного выше на то же самое, но с —tw-ring-width-reverse , как если бы последний используемый плагин выдавал вывод…

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

1. Делает ли это github.com/spatie /… помочь?

2. К сожалению, нет, мы уже используем его.

3. Нет, я имею в виду, это конкретная конфигурация для плагина для использования с PostCSS. Я использую Laravel Tailwind с postcss, но никогда не сталкивался с такой проблемой. Единственное отличие, которое я вижу — я не использую laravel-mix-purgecss для очистки, поэтому я предполагаю, что что-то не так с его конфигурацией

Ответ №1:

Я не уверен, поможет ли это, но я покажу вам свою конфигурацию, которая, похоже, работает нормально (с использованием Sass), я удалил некоторые ненужные части.

webpack.mix.js

 const mix = require('laravel-mix');

const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/tailwind.scss', 'public/css')
    .options({
        processCssUrls: false,
        postCss: [ tailwindcss('./resources/tailwind.config.js') ],
    })
    .version();

tailwind.scss

 @import "~tailwindcss/base";

@import "~tailwindcss/components";

@import "~tailwindcss/utilities";

и, наконец, tailwind.config.js

 const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  purge: {
      content: [
          './resources/views/**/*.blade.php',
          './resources/js/**/*.js',
      ],
      defaultExtractor: content => content.match(/[w-/.:] (?<!:)/g) || []
  },
  theme: {
    extend: {
        fontFamily: {
            sans: ['Inter var', ...defaultTheme.fontFamily.sans],
        },
        colors: {
            // some custom colors
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            bluegray: colors.blueGray,
            orange: colors.amber,
            teal: colors.teal,
            pink: colors.pink,
            green: colors.green,
        },
    },
  },
  variants: {
     gridColumn: ['responsive', 'hover'],
     gridColumnStart: ['responsive', 'hover'],
     gridColumnEnd: ['responsive', 'hover'],
  },
  plugins: [
      require('tailwindcss'),
      require('autoprefixer'),
      require('@tailwindcss/forms'),
      require('@tailwindcss/typography'),
      require('@tailwindcss/aspect-ratio'),
  ],
};

Когда я запускаю nom run dev , кажется, что все в порядке, вывода, как вы показали, нет, но у меня есть такие вещи:

 .space-y-11 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(2.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(2.75rem * var(--tw-space-y-reverse));
}

Очевидно, что позже только те, которые действительно используются в файлах blade / js, будут в конечном файле при запуске npm run prod

Ответ №2:

Проблема была решена путем обновления Laravel Mix до последней версии.

Метки: