Sage 10.7 + TailwindCSS + Bud + SCSS

[Skye1985]

Hello,

i’m migrating from Sage 9.x to Sage 10.x. I encounter issues trying to integrate Tailwind with my SCSS stylesheets. I read a lot of discussion here, but without find any solutions.
When i launch

yarn build

i got this error:

Module build failed (from ../node_modules/postcss-loader/dist/cjs.js): SyntaxError (1:62) resources/styles/app.scss The bg-primaryclass does not exist. Ifbg-primaryis a custom class, make sure it is defined within a@layer directive. [...]

My package.json deps are:

“devDependencies”: {
“@roots/bud”: “^6.17.0”,
“@roots/bud-sass”: “^6.17.0”,
“@roots/bud-tailwindcss”: “^6.17.0”,
“@roots/sage”: “^6.17.0”
},

i have a app.scss file with some import, where some of then have custom TailwindCSS classes as bg-primary that have to fill a background color of my “primary” color defined in tailwin.config.js file.
Have some suggestions? Where i can find an example of configuration with those packages?
Thanks in advance

[ben]

@Skye1985

i have a app.scss file with some import, where some of then have custom TailwindCSS classes as bg-primary that have to fill a background color of my “primary” color defined in tailwin.config.js file.

Don’t just use words to describe your setup, please post your actual code

@Skye1985

is a custom class, make sure it is defined within a @layer directive.

Searching for that error message had me ending up at the Tailwind docs: https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css