В свежий проект 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
), но это ничего не меняет.