vite + scss + tailwind doesn't really work

[idbd1]

I want to add tailwind to the project to slowly migrate away from scss.

I have app.scss and App.tsx, followed the documentation, but nothing seems to work to import tailwind.

Tried so far:
in app.scss
@import url('tailwindcss/index.css'); <-- nothing

vite.config.ts has the tailwindcss(),

The only way I can use tailwind classes is by importing import 'tailwindcss/index.css'; in App.tsx.

The only problem is that custom styling then doesn't work, I've tried creating tailwind.css with

@theme { --color-chocolate: #7B3F00 }

and importing it in app.scss
@import './tailwind.css';

Tailwind

but the bg didn't work at all, when pt-2 did work.

I've run out of ideas how to make it work.

[wongjn]

As per the documentation, Tailwind is not meant to be used with Sass:

Think of Tailwind CSS itself as your preprocessor — you shouldn't use Tailwind with Sass for the same reason you wouldn't use Sass with Stylus.

You do seem to have a typo as well - you have @thema but it should be @theme:

-@thema {
+@theme {
   --color-chocolate: #7B3F00;
 }

[idbd1]

hey thanks, wrote with a typo just here ^^

we wanted to gradually migrate towards tailwind but have a lot of sass, thought that it might be possible. anyway, thanks!

[kerryj89]

Tailwind v4 can be used with Sass but you have to tip-toe around both systems. If I remember right, the Vite Tailwind plugin didn't work (and also didn't allow me to point to other node_module directory [I'm using a monorepo]), so I had to use the Postcss Tailwind variant.

postcss.config.cjs

...
  plugins: {
    '@tailwindcss/postcss': {
      base: join(__dirname, '../../'), // Optional - if Tailwind is installed in another folder's node_module
  },
...

whatever.scss

@include meta.load-css('tailwindcss');

@theme {
  --color-whatever: red;
}

Tips:

• Sass doesn't like wildcard symbols inside css variables, so you have to escape it so that it doesn't error out before Postcss Tailwind can reach it

$tw-border-color-syntax: string.unquote('--value(--border-color-*)');
@utility border-* {
  border-color: $tw-border-color-syntax;
}

• Need to import Tailwind plugins without alias, as using alias seems to make Sass always assume a scss file and will error out when it sees Tailwind syntax. But explicitly importing a .css file relaxes this and will work.

@import '../../node_modules/tw-animate-css/dist/tw-animate.css';

• Alias paths e.g. ~company-tokens/colors.js doesn't work with @source, so you have to relatively or absolutely point back to the file

@source '../../../tokens/dist/web/colors.js';

---

I wish Tailwind v4 supported preprocessors still. I tried converting over to plain css and PostCSS, but PostCSS ecosystem to do looping/variables/conditionals feels a bit fragmented and unmaintained. I understand that native css replaced a lot of things that preprocessors used to handle, but there are some things Tailwind doesn't have an alternative for like looping and conditions and using PostCSS to do that doesn't feel great.

[rozsazoltan]

Actually, many people use preprocessors without truly taking advantage of their full potential. I think it's not such a bad thing that they're being removed from many projects where they weren't really needed in the first place

[kerryj89]

I agree, but for those of us with large projects that rely on its full power it's a bit of a pain, much like the lack of a JS config for Tailwind v4. Not the end of the world but still tedious to work around.

[strecca]

Remix version 6 have spent a day trying all kinds of fixes ... using the default vite module with that Remix 6 , trashing build and cache folders every time as I npm run dev Created all the recommended postcss and tailwind.config.js files. checked package.json. Re ran installs. But cannot resolve even with Copilot GPT-4.1 weighing in. These are installed in node_modules. Copilot is scratching its AI head as all known "fixes" fail to get my app up and running.
Error: Cannot apply unknown utility class px-4. Are you using CSS modules or similar and missing @reference? https://tailwindcss.com/docs/functions-and-directives#reference-directive

[idbd1]

@kerryj89 thank you! it worked! I had to add @use "sass:meta"; before loading tailwind, but it has finally worked 🙌 thanks for your help!

@use "sass:meta";
@include meta.load-css('tailwindcss');

[kerryj89]

You're welcome! I understand the pain you were going through so I had to help. I know it's not officially supported but it'll help us buy more time until we can migrate over completely.

[idbd1]

@kerryj89 curious if you also had the problem with tailwind messing up the existing scss styling. in my project we're importing css styling from another library, the moment I plug in tailwind through .postcssrc.cjs, it makes the pagination no longer sticky, one page doesn't show up completely etc.

here's what I tried in app.scss

@use 'sass:meta';
@include meta.load-css('tailwindcss');

@layer reset {
  @include meta.load-css('@another-library/dist/index.css') <--- this uploads the styling but it a lot of it gets overwritten, not sure why
}

[kerryj89]

Does that library use css layers feature?

When you import tailwindcss, there is a line inside it that looks like @layer theme, base, components, utilities; (you don't need to do anything with this, just explaining). This sets the stage for specificity, and specificity no longer becomes "what was defined last?" but instead "which @layer was it defined in?" where ln: 777 @layer base { .whatever.you.want { color: red; } } will be overwritten by ln: 32 @layer component { .whatever { color: red; }} even though it's less specific and defined earlier. Oh, and if the style is not defined inside @layer it is basically (and maybe unintuitively) the most specific, so ln 1 .whatever { color: green; } will win. This is a contrived example but you get the idea. Tailwind v4 uses the @layer feature and my guess is that it might be conflicting with your lib somehow. Another curveball: If your lib uses its own @layer feature and you define it before importing tailwindcss, whatever @layer(s) it bumps into first will be the @layer order it creates, with which can throw off your layer ordering by the time it gets to Tailwindcss - it doesn't matter at that point what Tailwind sets, it's a first-come-first-serve type of deal.

Another thing that could be messing up is if your other library has a component system. I have to do @source "../node_modules/@mylib/my-design-system"; which also includes the component source which has a lot of Tailwind classes. The @source is basically telling Tailwind, analyze the files there and keep any Tailwind classes you bump into from being tree-shaked out.

Edit: I missed the @layer reset in your snippet, so you probably know about @layer system. I am not sure why that is, unless I'm misunderstanding @layer right, the final @layer you have will be @layer theme, base, components, utilities, reset; and I would think reset would win in specificity (except against un-layered styles). Do you have screenshots of your devtools? In the Styles tab, next to the filter searchbox there is a stacked diamond icon. If you click on that you can see the @layer nesting for further debugging.

[idbd1]

@kerryj89 thanks for your response, I'm new to layers.

Here's the setup, I made some adjustments

@use 'sass:meta';
@layer base;
@include meta.load-css('tailwindcss');
@import '@mylib/dist/index.css' layer(base);

here are the layers

@MyLib doesn't use layers.

whether I have @MyLib as reset, it doesn't really make any difference - the moment I have tailwind enabled, the pagination no longer acts as sticky and the user needs to scroll to see it. without tailwind - the pagination acts sticky at the bottom of the screen and the content of a table is scrollable.

or another issue, when tailwind is on, our menu doesn't show styled

---

, but when it's off, the lines appear

hr working

hr not working

not sure what else to try.

[kerryj89]

Have you got it to work? Are you able to share an example I can pull down? If I have time and bored I might take a look this weekend.

[idbd1]

no, sadly I didn't get it to work and I'm not allowed to share an example :( not sure what else to try either :/