Add the Customizing Your Theme section to all Tailwind utilities.

[michaelalhilly]

Hello. I've been having a hard time finding the docs related to overriding built-in Tailwind utilities. I realized that that the "Customizing" section was omitted in the latest docs, but was present in every earlier version. Here are some examples:

https://tailwindcss-v0.netlify.app//docs/flexbox-display#customizing
https://v1.tailwindcss.com/docs/grid-auto-rows#customizing
https://v2.tailwindcss.com/docs/grid-auto-rows#customizing
https://v3.tailwindcss.com/docs/grid-auto-rows#customizing-your-theme

I believe this section was very helpful and provided clear instructions on how to customize each utility. It saved users a lot of time and now it is missing. See here:

https://tailwindcss.com/docs/grid-auto-rows

I don't think the Theme Variables > Overriding the default theme section is clear enough because it is presented on the same page with the Default theme variable reference which does not include most of the Tailwind utilities such as Flexbox and Grid utilities.

I'm happy to help add all of these sections but need verification that the following is correct:

main.css
`
@import "tailwindcss";

@theme {
--grid-rows-auto: auto minmax(0, 1fr);
--grid-rows-1fr: 1fr;
}
`

[adamwathan]

Hey! In v4 we recommend just creating custom utilities for most things, like this:

https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities

Only a few things are really intended to be driven by variables, which are things that feel very "design token"-y, like colors, shadows, type scale, etc.

Adding a custom grid-auto-rows value to me doesn't really feel like a design token, it's just a DX thing you're adding for your own project and doesn't really need to be powered by a variable.

Another way to look at it is if a certain set of utilities in Tailwind isn't already driven by variables (which grid-auto-rows isn't), then we don't intend for you to extend those utilities by defining variables.

It could be good to add a section to these pages about adding a custom utility for that CSS property though to make it clear.

[michaelalhilly]

Thanks for the quick response and clarification. I thought that might be the case and I agree there is value in keeping the built-in utilities the same across projects. It will def cut down on time spent debugging someone else's work.

I agree that adding the customization section will still be helpful but as you suggested it will show users how to add their own custom utility instead.

I also think there are enough users migrating from earlier versions to v4 that a very short section under Customizing your theme explaining that overriding built-in utilities is not longer supported and why is justified. This would also include a link to the page you referenced in your previous message.

I think these updates could help both existing and new users.

As stated before I'm willing to write everything up and submit a PR.

Thoughts?