CODEWITHSUNDEEP
tailwind-css
Bernie
Bernie

Reputation: 5055

Set min-width using tailwind spacing units without global config?

Is there a way to apply spacified spacing units from tailwind.config.js to e.g. min-width other than by global config? That's as far I can see the only way but would mean to duplicate all (necessary) spacing units which is from my pov a potential error source as each relevant space must get duplicated then.

// Dummy code explaining what I want to achieve
.myButton{
  @apply bg-red-100 w-auto;
      
  min-width: @apply w-11 // Not working just for theoretical explanation 
     
}

Upvotes: 3

Views: 5656

Answers (2)

kouts
kouts

Reputation: 360

min-w-[theme('spacing[11]')] also works, tested in Tailwind v3.

Upvotes: 1

Ihar Aliakseyenka
Ihar Aliakseyenka

Reputation: 14183

I'll provide every known option for me

1. Provide value inside config

module.exports = {
  theme: {
    extend: {
      minWidth: {
        11: '2.75rem'
      }
    }
  }
}

This will generate min-w-11 class with min-width: 2.75rem. But what if for some reason Tailwind change 11 value to let say 197px, how can we sync it? Well every option has access to default theme options like

module.exports = {
  theme: {
    extend: {
      minWidth: theme => ({
        11: theme('spacing[11]')
      })
    }
  }
}

This time min-w-11 will set min-width: 197px;. It referenced here

2. Use theme() directive It is works inside CSS files like - no need to set config unless you need new value which is not present in default theme

.myButton{
  @apply bg-red-100 w-auto;
  min-width: theme('spacing[11]'); // 2.75rem
}

More information about theme() directive here

3. With a JIT mode enabled - requires Tailwind version 2.1 or higher

module.exports = {
  mode: 'jit'
}

This on its own will generate CSS properties on the fly

<button class="myButton min-w-[2.75rem]">My Button</button>
<button class="myButton min-w-[197px]">My Button</button>

generated properties are

.min-w-\[2\.75rem\] {
    min-width: 2.75rem;
}
.min-w-\[197px\] {
    min-width: 197px;
}

You can read about JIT here

Please let me know if my answer is not what are you looking for as I may misunderstood question

Upvotes: 8

Related Questions