Tailwindcss: No way to specify flex-basis css property in tailwind

[connecteev]

I am trying to create a responsive flexbox grid, like https://codepen.io/astrotim/pen/WQwqbW
which requires me to specify 2 styles for flex-basis (both of which are important, one does not override the other).

.flex-grid-item {
    height: auto;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 33.3333%;
    flex-basis: 200px;
    display: flex;
}

Looking at the generated tailwind.css, there doesnt seem to be a way to specify these styles in the tailwind format, unless you define your own css class.

[benface]

both of which are important, one does not override the other

Not sure why you think that; the second flex-basis declaration does indeed override the first one. Try removing the first one and you should see no difference whatsoever in the result.

[adamwathan]

In this case you can just use width as well, which does exactly what flex-basis does in this example:

https://codepen.io/anon/pen/BvwEYZ

We didn't provide flex-basis utilities originally because width does the same thing for 99.9% of cases and we didn't want to increase the size of the framework, but you could easily add your own flex-basis utilities by following the documentation:

https://tailwindcss.com/docs/adding-new-utilities

You could write a plugin for it too:

https://tailwindcss.com/docs/plugins#adding-utilities

[connecteev]

@adamwathan thanks for the response.

[homerjam]

I'd vote for at least a very limited implementation to be included so that it can easily be extended in the theme settings. I seem to hit the 0.1% of cases rather frequently!

[adamwathan]

@homerjam What's an example of a situation where you need it? I've still not needed it even once in three years of building stuff with Tailwind.

[homerjam]

@adamwathan 😳 I figured out where I've been going wrong while I was trying to create a demo. I'd like to retract my previous comment! 😄

[HamzaAmar]

@adamwathan Hello adam some use case when you like the flex item to be in the some size for both direction column and row without add an extra media query