Use CSS variables: <style> :root { –width: 100px; } /* Set the variable –width */ table td{ width: var(–width); /* use it to set the width of TD elements */ border: 1px solid; } </style> <table> <tr> <td class=”tab”>elementOne</td> <td class=”tab”>elementtwo</td> </tr> </table> <!– reuse the variable to set the width of the DIV element … Read more
100vw = 100% of viewport width left:calc(250px + 100vw – 1024px)!important;
A simpler trick than previous ones: calc(0px – something) – with an unit – works while calc(0 – something) doesn’t. See Fiddle 3 These “tricks” work: calc(1px – something – 1px); calc(-1 * something) calc(0px – something) /* new */ where 0 – something didn’t (at least with your example). Fiddle 1 Fiddle 2
If you are using v2.x, add mode: ‘jit’ to your tailwind.config.js (no mode: ‘jit’ needed in tailwind v3) module.exports = { mode: ‘jit’, …. }; And use like this: (Without space!) class=”w-[calc(100%+2rem)]” It will produce: .w-\[calc\(100\%\+2rem\)\] { width: calc(100% + 2rem); } We can use the theme variables as well: h-[calc(100%-theme(space.24))] Tailwind v3 update Now … Read more