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

Question

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
}

Answer 1

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

Answer 2

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