Fragster
@Fragster
помогло? отметь решением!

Как правильно настроить встроенный purgecss в tailwindscc в laravel mix?

В свежий проект laravel установил tailwindcss в соответствии с пунктами 1, 2, 3 https://tailwindcss.com/docs/installation/
(@tailwind вставлял в app.scss)
Изменил webpack.mix.js в соответствии с тем, что дальше описано, получилось так:
webpack.mix.js

const mix = require("laravel-mix");
require("laravel-mix-postcss-config");

const tailwindcss = require('tailwindcss');

mix.setResourceRoot(process.env.APP_URL)
    .js("resources/js/app.js", "public/js")
    .sass("resources/sass/app.scss", "public/css")
    .options({
         processCssUrls: false,
         postCss: [tailwindcss("./tailwind.config.js")],
    })



Если в app.scss указать стили tailwind
body {
    @apply bg-gray-400
}
то это срабатывает и цвет фона меняется

Проблемы две:
несмотря на то, что NODE_ENV = development, все равно срабатывает встроенный purgecss, и это дико неудобно (хотя в мануалах написано, что при разработке он срабатывать не должен), нельзя указать в шаблонах произвольные стили

а также несмотря на то, что я задал ему в конфиге пути, по которым искать стили:
tailwind.config.js

module.exports = {
    purge: {
        content: [
            "./resources/views/**/*.php",
            "./resources/js/**/*.vue"
        ],
        options: {
            whitelist: ['bg-red-500', 'px-4'], // тест whitelist
        }
    },
    theme: {
        extend: {}
    },
    variants: {},
    plugins: []
};

после запуска npm run dev в стилях не появляются ни стили из шаблонов и компонентов, ни те, которые указаны в whitelist.

Пробовал генерить полный конфиг (npx tailwindcss init --full), но это ничего не меняет.
  • Вопрос задан
  • 407 просмотров
Решения вопроса 1
Fragster
@Fragster Автор вопроса
помогло? отметь решением!
После обновления на 1.6.1 и изменения куска app.scss на
...
/* purgecss start ignore */
@tailwind  base;
@tailwind  components;
@tailwind  utilities;
/* purgecss end ignore */
...


все заработало ожидаемым образом, включая шаблоны. В development получаем все стили в production - только используемые, в т.ч. в blade шаблонах и в vue компонентах.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы