0

I have a problem with my project, I don't understand why when trying to pass 'width' from props it won't work

https://i.stack.imgur.com/SoXzx.png

code looks like this

 <div className={'border-b-[1px] w-[50%] lg:' + props.width + ' text-thirdMainColor ' + props.margin }></div>

I will add that I also tried to add breakpoints in 'tailwind.config.js', but this did not change anything.

  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },

The following form works normally. https://i.stack.imgur.com/siSaq.png

Imprii93
  • 1
  • 1
  • in tailwind you can't use variables https://stackoverflow.com/questions/73640843/is-real-that-tailwind-if-you-add-a-string-with-class-it-wont-work you need to write everything explicitely as a string. I know isn't the best but that is the reality – Laaouatni Anas Jan 01 '23 at 18:03
  • a solution can be writing manually a useless display none element at the start with your desired classes explicitly as a string, then you can use `+ variables` or conditionals. so tailwind will add it the css file generated and you can use it everywhere even with conditionals and + variables. I hope this helps – Laaouatni Anas Jan 01 '23 at 18:05
  • 1
    I solved the problem, I replaced the code with: `
    ` and to props.width from w-[80%] to lg:w-[80%]     – Imprii93 Jan 01 '23 at 18:19

0 Answers0