TailwindCSS does not support react-on-rails with scss
sebytza23 opened this issue · 1 comments
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'),
]
}