Search code examples
csssasstailwind-csspostcss

Migrating SASS codebase to PostCSS


I had a plain CSS file that would apply a theme to my Nuxt 3 project, but I chose to convert to SASS so that I can make use of variables and nesting so that future changes (such as theme colors, etc) can be made easily. In addition, I wanted to integrate this with TailwindCSS until I realised that PostCSS is the way to go for that.

I've spent many hours of turning that plain CSS into multi-file SASS and now I'm desperate of converting that into PostCSS so that I can make use of Tailwind directives and functions in all files which would then be fed into the Nuxt 3 project.

Is there any way I can do this migration easily and preferably keeping the nesting and variables still there (possibly the ability to half-compile SASS)?


Solution

  • Instead of configuring PostCSS heavily by installing and configuring multiple plugins, I was able to make use of Tailwind using tailwindcss/nesting (to keep the ability to have nested styles) and theme() utilities they provide (for variables, therefore also configuring theme option in tailwind.config.js).