Tailwindcss with SCSS

Question

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

npm script: "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.

Tailwindcss with SCSS

0 Answers