tailwindcss typography "SassC::SyntaxError: Error: unterminated attribute selector for type"

Question

I upgraded the tailwindcss-rails gem and got this error when compiling assets for production:

bundle exec rails assets:precompile
rails aborted!
SassC::SyntaxError: Error: unterminated attribute selector for type
        on line 1009:16 of stdin
>> .prose ol[type="A" s] {

   ---------------^
/home/circleci/project/vendor/bundle/ruby/3.0.0/bundler/gems/sassc-ruby-4fce2b635ca5/lib/sassc/engine.rb:50:in `render'
/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sassc-rails-2.1.2/lib/sassc/rails/compressor.rb:29:in `call'
/home/circleci/project/vendor/bundle/ruby/3.0.0/gems/sprockets-4.0.2/lib/sprockets/sass_compressor.rb:30:in `call'

Answer 1

The issue is that this new syntax for CSS rules is not supported by libsass / sassc.

So I ended up forking tailwindcss-rails and remove the extras.

It's on GitHub: https://github.com/dorianmariefr/tailwindcss-rails/tree/minimal

And you can use it like this in your Gemfile:

gem "tailwindcss-rails",
    github: "dorianmariefr/tailwindcss-rails",
    branch: "minimal"

Answer 2

I kept having the SassC::SyntaxError. Adding the following line in production.rb resolved the issue:

config.assets.css_compressor = nil

It will prevent sassc-rails from setting sass as the compressor.

I found the answer here.