Question 73320 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Tailwind with dynamic values – Reactjs

I am learning tailwind in react and want to put dynamic value into css using tailwind.
I am used to MUI and there its quite simple like

<Box sx={{ width: dynamicValue }} />

How do I do such thing in tailwind ?
And if I cannot do that with tailwind why in MUI its not a problem ?

Tags:

3

Answers


  1. 0

    To use Tailwind classes in React you declare them within the className prop separated by a space, className in React is equivalent to class in HTML.
    E.g: <Box className='flex'>Content</Box>

    sx is a prop specific to MUI elements.

    Clarify what you mean by

    put dynamic value into css using tailwind

    Login or Signup to reply.
  2. 0

    You can use

    <div style={{ width: `${widthValue}px` }}></div>
    Login or Signup to reply.
  3. 0

    My Answer:

    Tailwind CSS provides numeric and fraction values.

    For example.

    w-0 width: 0px;
w-px    width: 1px;
w-0.5   width: 0.125rem; /* 2px */
w-1 width: 0.25rem; /* 4px */
w-1.5   width: 0.375rem; /* 6px */
...

w-auto  width: auto;
w-1/2   width: 50%;
w-1/3   width: 33.333333%;
w-2/3   width: 66.666667%;

    Also, you can use custom width size as like below.

    w-[619px]  or w-[50%]

    Please refer to this link.
    https://tailwindcss.com/docs/width

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search