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.

Answer 1

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.

Answer 2

Tailwind was not properly fully installed if I'm reading this.

What else did you do?

Where are you regular expressions for your HTML?

Where are your requirements?

Did you adjust to the pack_tag in your application lay-out?