1

I use tailwind in nextjs project, and when I restart the server (I mean start the server again with npm run dev) some tailwind code not working when I write class property in "inspect Element" it works but not tailwind code.

not works: w-1/2 (width: 25%), lg:w-0 (media screen and(max-width: 1024px) {code})

my tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      sm: { max: "640px" },
      md: { max: "768px" },
      lg: { max: "1024px" },
      xl: { max: "1280px" },
      "2xl": { max: "1536px" },
    }
  },
  plugins: [],
};

my global.css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

@import "./reset.css";
david
  • 47
  • 1
  • 5
  • That is the correct answer!!!! https://stackoverflow.com/questions/72007089/passing-tailwind-class-as-a-prop-in-react – david Dec 29 '22 at 17:16

2 Answers2

1

You need to pass the classes fully w-1/2 instead of partially like 1/2. As tailwind doesn't support dynamic classes.

Try the following code.

function Component({ width}) {
  return (
    <div
      className={`${width}`}
    >
      Hello there
    </div>
  );
}

And use it as

<Component
width={"w-1/2"}
/>

Edit: Using Safelisting classes

As a last resort, Tailwind offers Safelisting classes

Safelisting is a last-resort, and should only be used in situations where it’s impossible to scan certain content for class names. These situations are rare, and you should almost never need this feature.

In your example,you want to have different width. You can use regular expressions to include all the widths you want using pattern

In tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{html,js}',
    './components/**/*.{html,js}',
  ],
  safelist: [
    {
      pattern: /w-(1/2|2/2|1/6|2/6)/, // You can define all the width you desire

    },
  ],
  // ...
}
krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
0

you have to create an extend object with your personalized code inside like this:

theme: {
    extend: {
      screens: {
  
        'clg': '1090px',   
  
        'cxl': '1159px',      
  
        'c2xl': '1213px',
  
        'c3x1': '1373px',
        
        'c4x1': '1480px',
        
        'c5x1': '1579px',

        'c6x1': '1679px',

        'c7x1': '1740px',

        'c8x1': '1820px',
        
      },
Gabriel Carlos
  • 1
  • 1
  • and w-1/4? why not work? w-1/2 this works.... – david Dec 29 '22 at 15:28
  • maybe tailwind don't understand perfectly, i always use what the documentation says https://tailwindcss.com/docs/screens – Gabriel Carlos Dec 29 '22 at 15:35
  • no, you don't understand me, in some div class I use for example w-1/2 or w-2 which means "width: some number" but when I use w-1/4 which means width: 25% it does not work, also I can't see in inspect element – david Dec 29 '22 at 15:39
  • I understand what you're saying – Gabriel Carlos Dec 29 '22 at 15:48
  • For 3 hours I do everything but finally can't resolve the problem, my brain is dead – david Dec 29 '22 at 15:51
  • maybe try to save the tailwind.config.js sometimes I have this problem things stops working than I save the file and it's comeback working – Gabriel Carlos Dec 29 '22 at 15:53
  • probably you already did this i wonder – Gabriel Carlos Dec 29 '22 at 15:53
  • I solved it, so I have a modal layout that has props "style" which I use for tailwind code, I edited "style" with "className" and now it works! thank Gabriel for your answer and support – david Dec 29 '22 at 16:45