tailwind not loading dark: styles (stb v7)

[gritty timber]

any idea why the style is not getting applied (css variable being read but not applied)

for example:

:root {
  /* Backgrounds */
  --bg-button: 255, 255, 255;
  --bg-elevated: 255, 255, 255;
  --bg-main: 250, 250, 250;
  --bg-primary: 255, 255, 255;
  --bg-primary-action: 23, 23, 23;
  --bg-primary-action-hover: 49, 49, 49;
  --bg-quaternary: 240, 240, 240;
  --bg-react-select: 255, 255, 255;
  --bg-secondary: 250, 250, 250;
  --bg-secondary-action: 229, 229, 229;
  --bg-tertiary: 245, 245, 245;
  --bg-tertiary-action: 255, 255, 255;
  --tag-bg: 245, 245, 245;

  /* Borders */
  --border-primary: 0, 0, 0, 0.08;
  --border-secondary: 0, 0, 0, 0.05;
  --border-tertiary: 0, 0, 0, 0.04;
  --tag-border: 245, 245, 245;

  /* Colors */
  --text-blue: 29, 78, 216;
  --text-dark: 23, 23, 23;
  --text-dark-secondary: 163, 163, 163;
  --text-light: 250, 250, 250;
  --text-light-secondary: 82, 82, 82;
  --text-primary: 23, 23, 23;
  --text-primary-action: 255, 255, 255;
  --text-quaternary: 163, 163, 163;
  --text-secondary: 82, 82, 82;
  --text-tertiary: 115, 115, 115;

  /* Shadows */
  --base-shadow-color: rgba(0, 0, 0, 0.05);
  --button-drop-shadow: transparent;
  --button-shadow: inset 0px 1px 0px 0px rgb(255, 255, 255),
    0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 1px 0px 0px rgba(0, 0, 0, 0.08),
    0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02),
    0px 4px 4px 0px rgba(0, 0, 0, 0.01);
  --tag-focus: 0px 0px 0px 1px rgb(59, 130, 246),
    0px 0px 0px 3px rgba(59, 130, 246, 0.15);
}```

[gritty timber]

colors.css

importing that into globals.css like this:

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

@import "./fonts.css";
@import "./colors.css";

and importing globals into preview

[north marlin]

Hey @gritty timber, Still having trouble with this?

For .bg-primary I think you need to switch over to use rgba() if you want to use that opacity value that you set

[gritty timber]

why's that?

[north marlin]

for .border-secondary does your button have a border width? if it's 0 you wont see a border at all

[gritty timber]

tailwind is apperantly transpiling it to work with opactity

[north marlin]

rgb() only takes 3 arguments

hmmmm okay

[gritty timber]

not sure...

how would i handle darkmode with storybook?

like changing the playground color etc?

[north marlin]

https://storybook.js.org/recipes/tailwindcss/

[gritty timber]

why is storybook adding class dark when specifying attributeName="data-mode"

[north marlin]

It shouldn't be 🤔 Only the withThemeByClassName decorator does that

[woeful eagle]

i am using tailwindcss, and i have put these inside preview-head.html

<link href="../src/styles/typography.css" rel="stylesheet" />```

the tailwindcss styles still doesn't load.

[north marlin]

Hey @woeful eagle 👋 I would recommend importing them into your preview.js file so that Storybook can update the styles when you make changes 🙂

[violet flare]

@gritty timber are you pointing content attribute in config all the class references? Also make sure the classes are full so you can’t do things like const class = “bg-“ + color.

https://tailwindcss.com/docs/configuration might have more info

[gritty timber]

wym by that?

that's my tailwind config

it's getting applied somehow but not changing when switching to darkmode (the data-mode dark is not applying)

[violet flare]

So tailwind does a regex search to find classes in content attribute. If the classes are not files or css config files you are using it won’t include it in your css. This is so it doesn’t add extra css. It’s like it’s purging stuff you don’t use.

[woeful eagle]

whenever i import global.css inside preview.js, i am getting this error

   no extension
     /fonts/grotesk-semi-mono-regular.woff2 doesn't exist
   .mjs
     /fonts/grotesk-semi-mono-regular.woff2.mjs doesn't exist
   .js
     /fonts/grotesk-semi-mono-regular.woff2.js doesn't exist
   .jsx
     /fonts/grotesk-semi-mono-regular.woff2.jsx doesn't exist
   .ts
     /fonts/grotesk-semi-mono-regular.woff2.ts doesn't exist
   .tsx
     /fonts/grotesk-semi-mono-regular.woff2.tsx doesn't exist
   .json
     /fonts/grotesk-semi-mono-regular.woff2.json doesn't exist
   .cjs
     /fonts/grotesk-semi-mono-regular.woff2.cjs doesn't exist
   as directory```

It seems that it is adding some ending expression there

[gritty timber]

could u please make a different thread?

else all of this is getting mixed up and hard to keep track of. Thanks!

[woeful eagle]

a new post?

[gritty timber]

yes.

[woeful eagle]

sure

[gritty timber]

thanks 🙂

[gritty timber]

mhm but i am not importing the styles from anywhere.

mentioning these directly in the tailwind config

so tailwind will transpile these into the desired /correct css

When building the css it looks good to me (it's transpiling it and also including the dark mode values)

[violet flare]

Can I see the jsx file/s where it’s applied?

[violet flare]

Ok so I see the class gets generated so probably what you want to do is play around the browser dev tools to what formate would work for those css vars to work properly.

[gritty timber]

for example: "bg-white dark:bg-button font-medium text-gray-900 dark:text-gray-50",

dark: is never getting used / applied

[vagrant tree]

Is not working for me also, I tried to use it in a clean https://github.com/vercel/turbo/tree/main/examples/with-tailwind , when I tried to use storybook in the UI folder is not loading any tailwind styles 😦

[gritty timber]

tailwind not loading dark: styles (stb v7)

[gritty timber]

its not loading dark: styles?

[north marlin]

@vagrant tree I think you're having a different problem here. Would you mind opening a new thread and tag me 🙂 I'd be happy to help out

[gritty timber]

solved my issue

lol

 darkMode: ["class", '[data-mode="dark"]'],
``` -> ```json
 darkMode: ["class"],

😂

[north marlin]

Ahaha that would do it!