Stan's blog

Плагин tailwindcss-rails упрощает установку и использование Tailwind в проекте. Но что делать, если есть желание использовать вложенные css? Придется использовать postcss c плагином postcss-nested. Есть два варианта. Первый вариант - не использовать tailwindcss-rails, а обработку для tailwindcss добавить в package.json. Но есть еще способ. 

Добавление postcss в плагин tailwindcss-rails

# config/initializers/tailswindscss-rails.rb
module Tailwindcss
  module Commands
    class << self
      def compile_command(debug: false, **kwargs)
        command = [
          executable(**kwargs),
          "-i", Rails.root.join("app/assets/stylesheets/application.tailwind.css").to_s,
          "-o", Rails.root.join("app/assets/builds/tailwind.css").to_s,
          "-c", Rails.root.join("config/tailwind.config.js").to_s,
        ]

        command << "--minify" unless (debug || rails_css_compressor?)

        postcss_path = Rails.root.join("config/postcss.config.js")
        command += ["--postcss", postcss_path.to_s] if File.exist?(postcss_path)
        command
      end
    end
  end
end

# config/postcss.config.js
module.exports = {
  plugins: [
    require('postcss-import'),
    require('tailwindcss'),
    require('autoprefixer'),
    require("postcss-nested"),
    require("postcss-flexbugs-fixes"),
  ]
}

yarn add tailwindcss autoprefixer postcss postcss-flexbugs-fixes postcss-import postcss-nested @tailwindcss/forms @tailwindcss/typography