Sage9 PostCSS Plugins - post css color function

sage
1

Am trying to use post css color function have used it on a previous version of sage and it worked fine on the latest installed with tailwind it doesnt seem to be working.

background: color(config("colors.red") a(41%));

have installed with yarn and added to the plugin loader in postcss.config.jg

 plugins: {
  "postcss-color-function": true,
  cssnano: options.enabled.optimize ? cssnanoConfig : false,
  autoprefixer: true,
},

this perviously worked on another site but now it just doens’t get processed and I end up with just straight into the css like

background: color(#e3342f a(41%));

Anyone experienced this or knows how to get this working? its useful when using tailwind.

Thanks
J

2

Did you use the Tailwind Preset when setting up Sage? Because if you did, the webpack.config.preset.js (which is created by the preset) is overriding the postcss.config.js. You would need to add the plugin there instead.

This is the stub of the file which is placed within resources/assets/build when the preset runs:

1 Like
3

@knowler I knew you’d know the answer to this!

yep was using the preset. I have added the plugin to the webpack.config.preset.js and it’s all working as expected now.

thanks very much.

1 Like