How to make tailwindcss and scss work together?

[alec-c4]

Hey! 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?

[MrHubble]

The readme suggests to use postcss-import for @import statements with Tailwind.

Don't forget to put your @import statements at the top of your file. For example:

/* application.tailwind.css */

@import 'external';
@tailwind base;
@tailwind components;
@tailwind utilities;

[MrHubble]

@alec-c4 can this issue now be closed?