Tailwindcss with SCSS

Question

I would like to implement SCSS plugin with TailwindCSS. Everything is compiled except my custom classes.

NPM script from package.json:

"tw:scss": "tailwindcss --postcss -i ./src/style/index.scss -o ./src/dist/style.css"

main.scss file (I also tried basic @tailwind base, @tailwind components, @tailwind utilities imports):

@import "tailwindcss/base";
@import "tailwindcss/components";  
@import "tailwindcss/utilities";

@import "./_general.scss";  
@import "./card.scss";

card.scss:

@layer components {
    .card {
    @apply bg-very-dark-blue-second rounded-lg w-11/12 p-4;
  }
}

_general.scss:

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap");`  
body {
  font-family: "Outfit", sans-serif;
}

postcss.config.js:

module.exports = {
  plugins: [
    require("postcss-import"),
    require("tailwindcss"),
    require("autoprefixer"),
  ],
};

When I start npm run tw:scss, only _general.scss is transpiled. Question is, is it even possible to use scss in this way? If yes, how to fix this issue.

Answer 1

TailwindCSS v4

Starting from TailwindCSS v4, support for preprocessors has been discontinued, meaning that SASS can no longer be used with it from v4 onwards.

• Compatibility - TailwindCSS v4 Docs
• tailwindlabs/tailwindcss #15716 by RobinMalfait:
  Migration tool doesn't recognize .scss files - GitHub