DEV Community

Discussion on: Setup TailwindCSS in Angular the easy way

Collapse
 
1antares1 profile image
1antares1

How would you resolve this error with SCSS Files?
dev-to-uploads.s3.amazonaws.com/i/...

Collapse
 
devpato profile image
Pato • Edited

That's more of a linter issue since it's not used to this type of Syxtax. If I find a way to resolve it I will let you know BUT this shouldn't affect if your app works or not

Collapse
 
pelx profile image
Laura

it does. an app doesn't work!

Thread Thread
 
devpato profile image
Pato

Can you send me a link to your code? mine is working perfectly fine. Also, see the github repo link I posted at the end of the tutorial

Thread Thread
 
pelx profile image
Laura

I added this:
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

.nav-bar {
@apply border-t block no-underline hover:underline py-2 text-grey-darkest hover:text-black md:border-none md:p-0;
}

to my styles.scss file. It will not compile. If I add teh same classes to HTML, it works fine.

ERROR::
Error: ./src/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
SyntaxError

(7:4) C:\dev_dev\tailwind-app\styles.scss The text-grey-darkest class does not exist. If you're sure that text-grey-darkest exists, make sure that any @import statements are being properly processed before Tailwind CSS sees your CSS, as @apply can only be used for classes in the same CSS tree.

cheers
Laura

Thread Thread
 
devpato profile image
Pato

Interesting can you post your tailwind.config.js or send me a link to your repo? I would love to help :)

Thread Thread
 
pelx profile image
Laura

Hi Pato, this is very kind. I have created a repo: github.com/pelx/tailwindcss-app
It actually works, the only problem i still cant nail is linting. I created stylelint.config.js Didn't work. cheers. Laura