How to make tailwindcss and scss work together?

user_143511 0
Viewed 1305

I'm trying to make tailwindcss and scss work together, but I have some issues. I've tried 2 options

1 - rails new app_name -c tailwind - works fine, but I cannot use nested selectors, such as

p {
  h1.name {
     @apply text-9xl;
  }
}

2 - rails new app_name -c postcss - works almost fine, I can use nested selectors with my postcss config

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('tailwindcss/nesting'),
    require('autoprefixer')
  ]
}

but I cannot use @import statement wit taiwindcss code (basic CSS code works fine).

application.scss

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "external";

external.scss

h1 {
  @apply text-9xl;
}

body {
  background: red;
}

In this example body is read, but text-9xl isn't applied to h1. How to fix it?

PS: I use ruby on rails 7.0.1 with cssbundling-rails gem

tailwind-css sass ruby-on-rails css ruby
1 Answers

It was discussed a week ago in this issue. For now if both Tailwind and PostCSS are required,

then you'll need the whole Node enchilada

as DHH stated in the discussion. Or, you can use this hack that is based on extra pre-compilation step of joining all css files into one.

Or, you can wait until this step gets into tailwindcss-rails gem.

It also worth noting that @apply is not recommend for general purposes in tailwind. As stated in the docs:

Whatever you do, don’t use @apply just to make things look “cleaner”. Yes, HTML templates littered with Tailwind classes are kind of ugly. Making changes in a project that has tons of custom CSS is worse. If you start using @apply for everything, you are basically just writing CSS again and throwing away all of the workflow and maintainability advantages Tailwind gives you, for example:

Maybe, there is no actual need for all these tricks just for the sake of @apply.

user_9465000
Related