I recently created a simple template using Tailwind for my Next.js project.
Normally, I rely on Tailwind's @layer components to incorporate custom CSS styles.
However, this time I wanted to experiment with Sass, so I converted my globals.css file to globals.scss, but encountered an error in the process.
Error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[9].use[2]!./node_modules/next/dist/build/webpack/loaders/resolve-url-loader/index.js??ruleSet[1].rules[2].oneOf[9].use[3]!./node_modules/next/dist/compiled/sass-loader/cjs.js??ruleSet[1].rules[2].oneOf[9].use[4]!./styles/globals.scss SassError: expected "{". ╷ 12 │ @apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"]; │
Below is the content of my globals.scss:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./components/Header/Header.module.css";
@import "tailwindcss/utilities";
@layer base {
body {
@apply text-white w-screen #-{important} h-screen #-{important} font-["-apple-system","poppins"];
}
a {
@apply active:bg-[#ffffff]/20 #-{important} focus:bg-[#ffffff]/20;
}
}
@layer components {
.filter-white {
filter: invert(93%) sepia(91%) saturate(32%) hue-rotate(336deg)
brightness(107%) contrast(99%);
}
.navbar {
@apply p-0 #-{important} min-h-[4px] !bg-[#141414]/20 backdrop-blur-lg text-sm leading-[4px] #-{important};
}
}
The code snippet from tailwind.config.js is as follows:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
Any assistance or suggestions would be greatly appreciated!