SolidJS•2y ago

class string interpolation with tailwind

Hello, I'm not sure that my issue is relevant to solid or to vite tailwind in general. When using string interpolation to create a css class it does not get imported if the interpolation only concern part of the class name. i.e.

const App: Component = () => {
  const bg1 = "bg-blue-500";
  const bg2 = "green";

  return (
    <>
      <button class={"bg-red-500 text-black font-bold py-2 px-4 rounded"}>
        Hello World
      </button>
      <button class={`${bg1} text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
      <button class={`bg-${bg2}-500 text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
    </>
  );
};

const App: Component = () => {
  const bg1 = "bg-blue-500";
  const bg2 = "green";

  return (
    <>
      <button class={"bg-red-500 text-black font-bold py-2 px-4 rounded"}>
        Hello World
      </button>
      <button class={`${bg1} text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
      <button class={`bg-${bg2}-500 text-black font-bold py-2 px-4 rounded`}>
        Hello World
      </button>
    </>
  );
};

The third button isn't green. Is it expected behaviour ? link to sandbox: https://codesandbox.io/s/withered-tdd-542e6x?file=/src/App.tsx

SarguelUnda

CodeSandbox

withered-tdd-542e6x - CodeSandbox

withered-tdd-542e6x by SarguelUnda using solid-js

8 Replies

thetarnav•2y ago

I think that tailwind purges unused classes, or in JIT mode never even adds them if they aren not used. And if they are used or not is probably checked by searching the bundled code for the classes. There has to be a way to add classes to tailwind config that will be added regardless if found in code or not It's not solid specific so you will find something online for sure

SarguelOP•2y ago

I understand that part the thing that I can't wrap my head around is that it "understand" that bg1 = "bg-blue-500" so it import it but it doesn't for "bg-"+ "green" +"-500". But if you inspect the dom you see the class. I don't understand where the cutoff is. Couldn't find documentation online on this subject.

thetarnav•2y ago

(/bg-blue-500/g).test(your_code) 🤷‍♂️

SarguelOP•2y ago

ok found someone mentioning that aswell, https://stackoverflow.com/a/68020542

Stack Overflow

How to use template literals in tailwindcss to change classes dynam...

I tried to change it with this line of code it but it doesn't work const [click, setClick] = useState(false); const closeNav = () => { setClick(!click); }; const openNav = () => { setCl...

SarguelOP•2y ago

So my only two options are to either import everthing or to fully declare the class name if I understand properly

SarguelOP•2y ago

and relevant doc in tailwind https://tailwindcss.com/docs/content-configuration#dynamic-class-names I couldn't find anything on my first search sorry

Content Configuration - Tailwind CSS

Configuring the content sources for your project.

Unknown User•2y ago

Message Not Public

Raqueebuddin Aziz•2y ago

You cannot have dynamic class names that are made up of parts and auto bundle them Either add them to tailwind safelist or use full names

Gaming

Programming

class string interpolation with tailwind

Did you find this page helpful?