Use both Tailwind and SCSS with cssbundling-rails

Question

In the Rails 6 project I'm working on, we're looking upgrade from webpacker to cssbundling-rails and jsbundling-rails. We currently use Tailwind with SCSS, but if I'm looking at the installation command correctly, it looks like you can only choose one option:

./bin/rails css:install:[tailwind|bootstrap|bulma|postcss|sass]

I installed with Tailwind and changed the application stylesheet that was generated:

// Old
application.tailwind.css
// New
application.tailwind.scss

I also added the build script in package.json with .scss instead of .css:

"scripts": {
  "build:css": "tailwindcss --postcss -i ./app/assets/stylesheets/application.tailwind.scss -o ./app/assets/builds/application.css",
  …
}

In postcss.config.js:

module.exports = {
  parser: 'postcss-scss',
  syntax: 'postcss-scss',
  plugins: {
    …
  }
}

This is the error I'm getting:

18:26:22 css.1  | Error: Unexpected '/'. Escaping special characters with \ may help.
18:26:22 css.1  |     at Root._error (/node_modules/postcss-selector-parser/dist/parser.js:174:16)
18:26:22 css.1  |     at Root.error (/node_modules/postcss-selector-parser/dist/selectors/root.js:43:19)
18:26:22 css.1  |     at Parser.error (/node_modules/postcss-selector-parser/dist/parser.js:740:21)
18:26:22 css.1  |     at Parser.unexpected (/node_modules/postcss-selector-parser/dist/parser.js:758:17)
18:26:22 css.1  |     at Parser.combinator (/node_modules/postcss-selector-parser/dist/parser.js:656:12)
18:26:22 css.1  |     at Parser.parse (/node_modules/postcss-selector-parser/dist/parser.js:1097:14)
18:26:22 css.1  |     at Parser.loop (/node_modules/postcss-selector-parser/dist/parser.js:1039:12)
18:26:22 css.1  |     at new Parser (/node_modules/postcss-selector-parser/dist/parser.js:164:10)
18:26:22 css.1  |     at Processor._root (/node_modules/postcss-selector-parser/dist/processor.js:53:18)
18:26:22 css.1  |     at Processor._runSync (/node_modules/postcss-selector-parser/dist/processor.js:100:21)

Is it possible to use both Tailwind and SCSS files with the new cssbundling-rails gem, or can we only choose one option as of now? Is there some other setting that I'm overlooking?

EDIT:

I decided to go with the postcss installation of cssbundling-rails and leaving tailwind installed manually with yarn, and it's working for the most part: ./bin/rails css:install:postcss

I was convinced that I had to use ./bin/rails css:install:tailwind and didn't even consider ./bin/rails css:install:postcss as an option. There are still some things that need to be tweaked, but at least the main stylesheets are being imported.

user_648122 · Answer

If we look at https://github.com/rails/cssbundling-rails#how-does-this-compare-to-tailwindcss-rails-and-dartsass-rails

If you're already relying on Node to process your JavaScript, this gem is the way to go. But if you're using the default import map setup in Rails 7+, you can avoid having to deal with Node at all by using the standalone versions of Tailwind CSS and Dart Sass that are available through tailwindcss-rails and dartsass-rails.

Do you need cssbundling-rails? - I am not sure about sass, but according to the docs its not needed for dartsass but I havent got this working myself.

Use both Tailwind and SCSS with cssbundling-rails

1 Answers