0

I have a react component with the following code:

function DoubleCell(props: Props) {
    return (
        <div className="DoubleCell flex w-2/3 mx-auto">
            <div className={`formula_dbl ${props.formula_width ? `w-${props.formula_width}` : "w-1/2"}`}>
                {props.formula}
            </div>

            <div className={`desc_dbl ${props.description_width? `w-${props.description_width}`:"w-1/2"}`}>
                {props.description}
            </div>
        </div>
    );
}

It is basically a div taking 2 thirds of a screen width with 2 nested divs inside. Their contents are defined elsewhere when they are called as a component. Now one interesting thing is that I want the nested divs to optionally have their widths defined...

Here is my Props interface.

interface Props {
    formula: String;
    description: String;
    formula_width?: String;
    description_width?: String;
}

All of this is code is present in components/FormulaCell.tsx

Here is my _app.tsx file where I start calling the component:

import '@/styles/globals.css'
import DoubleCell from "./components/FormulaCell"

const formulae = [
    ["f1","f1-uses","5/6", "1/6"],
    ["f2","f2-uses","4/6", "2/6"],
    ["f3","f3-uses","3/6", "3/6"],
    ["f4","f4-uses","2/6", "4/6"],
    ["f5","f5-uses","1/6", "5/6"],
]

function App(){
    return (
        <>
            {formulae.map((formula, index) => (
                <DoubleCell
                key={index}
                formula={formula[0]}
                description={formula[1]}
                formula_width={formula[2]}
                description_width={formula[3]}/>
        ))}
        </>
    )
}

export default App;

In the above code where I defined the array of values to be used as parameters for the <DoubleCell/> component...

["f1","f1-uses","5/6", "1/6"],
["f2","f2-uses","4/6", "2/6"],
["f3","f3-uses","3/6", "3/6"],
["f4","f4-uses","2/6", "4/6"],
["f5","f5-uses","1/6", "5/6"]

The content (eg: f1 and f1-uses) works, but the tailwind width classes don't work.

I tried look for a solution to this problem and found this post here

Where they said that styles were being removed by tailwind as they were not used, and that they had created an invisible div with the required classes for tailwind to load them. The problem is that my project will soon use Arbitrary values, which I many not be able to put in an invisible div (as it can be literally anything).

Crypto
  • 337
  • 3
  • 11
  • What happens if you enable [JIT](https://v2.tailwindcss.com/docs/just-in-time-mode) in the tailwind config? – heaxyh May 20 '23 at 06:13
  • @heaxyh unfortunately `JIT` makes no difference, and yes, I did configure my purge like so: `purge: ['./src/**/*.js', './src/**/*.jsx', './src/**/*.ts', './src/**/*.tsx', './public/**/*.html','./src/*',]`. – Crypto May 20 '23 at 06:40

1 Answers1

1

A tip from the author of tailwindcss:

Useful trick if you ever need to use inline styles because a value is coming from the database or something but also need to change those styles on hover or similar —

Use those values to set CSS variables using inline styles, then use arbitrary values to read the variables 

<div
  style={{
    '--custom-width': width,
  }}
  className="w-[var(--custom-width)]"
>
zouabi
  • 649
  • 1
  • 7
  • 16
  • style={{'--custom-width': props.description_width}} className={desc_dbl ${props.description_width ? `w-[var(--custom-width)]` : "w-1/2" }} shoved this into my code and get ts error 2322 Type '{ '--custom-width': String | undefined; }' is not assignable to type 'Properties'. @zouabi – Crypto May 20 '23 at 07:29
  • Oh yeah, I think I used to fix it with `style={{ ('--custom-width' as any): props.description_width}}` I think. – zouabi May 20 '23 at 12:26
  • nope. `Parsing error: Property assignment expected.` and `Unexpected token. Did you mean `{'}'}` or `&rbrace;`?ts(1381)` – Crypto May 22 '23 at 09:42
  • Then you'd have to `any` the whole object: `
    `     – zouabi May 23 '23 at 03:36