TailwindCSS does not support react-on-rails with scss

[sebytza23]

Environment:

Framework/Library Versions: React-on-Rails, tailwindcss-rails
Yarn Version:1.22.21
Rails Version: 7.1.3

Issue:

I've been working on integrating TailwindCSS with a React-on-Rails application. While attempting to set up TailwindCSS for styling, I encountered issues with file recognition and the use of TailwindCSS directives in SCSS modules.

Details:

TailwindCSS Configuration: Initially tried to configure tailwindcss-rails for use within the application. However, it seems that .tailwind.scss files are not being properly recognized or processed.
Integration with Yarn: Managed to partially resolve the issue by incorporating TailwindCSS through a Yarn package. This approach allowed for basic TailwindCSS functionality but did not fully address the problem.
SCSS Module Issue: Despite the workaround, I am facing a specific issue where the @apply directive from TailwindCSS is not recognized within SCSS module files. This occurs in the following path:/app/javascript/bundles/components/home.module.scss.

Expected Behavior:

The expected behavior is for TailwindCSS to be integrated with React-on-Rails or just a integratuon for using .(sc|sa)ss, allowing for the use of TailwindCSS classes and directives (@apply) within .scss or .modules.{(sc|sa|c)ss}' files without any issues.

PostCSS configuration

module.exports = {
    loader: 'postcss-sass',
    plugins: [
      require('postcss-import'),
      require('tailwindcss/nesting'),
      require('tailwindcss'),
      require('autoprefixer'),
      require('postcss-flexbugs-fixes'),
      require('postcss-preset-env')({
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3
      }),
    ]
  }

TailwindCSS configuration

const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  relative: true,
  content: [
    './public/*.html',
    './app/helpers/**/*.rb',
    './app/javascript/bundles/**/*.{js,jsx,ts,tsx}',
    './app/javascript/bundles/**/*.{css,scss}',
    './app/views/**/*.{erb,haml,html,slim}'
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/container-queries'),
  ]
}

[brunoprietog]

Hi, this gem is not intended to be used with anything node related. In that case, you must install Tailwind on your own using the corresponding NPM packages.