Refactor tailwind config

[driskull]

Background

Our tailwind config was first created when Tailwind was on V1 and the config has some stuff we likely no longer need. There are also some naming we can change to make it consistent with latest Tailwind configs.

related to #2143

Todo

• Revisit names and structure of colors
  • borderColor
  • backgroundColor
  • background
• Verify that the custom plugins we have defined are necessary and remove if not needed
• Cleanup anything that is not needed

Description

Refactor tailwind config to clean up structure and naming.

I think the config can be restructured so that text colors are only defined in the color section. I don't think we need the borderColor and backgroundColor sections.

Also, colors don't need to be text-color-<color>. They can just be text-<color>.

Instead of naming colors with numbers, we could maybe name them with purpose? Its not obvious of the difference below.

 {
  1: "var(--calcite-ui-text-1)",
  2: "var(--calcite-ui-text-2)",
  3: "var(--calcite-ui-text-3)",
},

We also need to evaluate if the plugins we have created are still necessary in Tailwind 3x. Some of the utilities we have defined may no longer be necessary.

Proposed Advantages

The goal is to get this config production ready so that we can share it with others in an NPM package. We should have the names and structure nailed down and aligned with current tailwind best practices

Relevant Info

#3700 (comment)

Which Component

N/A tailwind config.

[driskull]

https://play.tailwindcss.com/L5OEDfYxtU?file=config

We could also just remove the -color- part and have text-<color>?

[asangma]

Wouldn't this conflict with font sizes which appear as text-1, etc. with @apply?

[asangma]

re: conflict
I know there's a note in the Tailwind file that suggests we should start using text-Nh or text-N-wrap, but I wonder if that's still a good approach.

[driskull]

@asangma I'm not sure...

The tailwind playground is good for testing out these things quickly:
https://play.tailwindcss.com/

https://tailwindcss.com/docs/configuration

[asangma]

Thanks for sharing that playground. That's nice.

Our case is that we've got our custom values for font sizes that uses the text-N pattern.
That's why we ended up with "color" as part of our font color pattern.

I could be wrong, but seems like we'd need to update the names of our font size keys if we wanted to make text-N the pattern for font color.

[driskull]

but seems like we'd need to update the names of our font size keys if we wanted to make text-N the pattern for font color.

Agreed. I'll leave that up to you guys. Now that we will be making this a shared project, it might be something to consider. I'm not sure how obvious or user friendly the numbers are. If we are going to do it, now would be the time.

[asangma]

re: text color
Does it make sense to call it something like text-gray-N?
The values for the existing numbers would remain but we'd replace "color" with "gray".

re: font size
Does it make sense to use the Tailwind naming convention?
text-sm, text-base, text-lg, etc.?

I'm not suggesting that we use the default values for those (even though they're largely the same). That'd be a different discussion I think.

[asangma]

note: the "gray" suggestion is based on Tailwind's pattern.

[driskull]

https://github.com/Esri/calcite-components/blob/master/tailwind.config.ts#L4

• do we need "borderColor"? Seems like "colors" would handle it.
• background.background => background.
• background.foreground.1 => foreground-1? etc.
• colors.color.1 => colors.1? etc.
• fontSize negative values? Maybe could handle these better
• do we need the "8h" where we combine font sizes with line height? Seems better if they were just separated.
• do we need "backgroundColor"? Seems like "colors" would handle it.
• our "spacing" seems to overwrite the default values but with the same values. Do we need this section?
• do we need any of the plugins?

[macandcheese]

@driskull any issue with closing this as something that will be covered with tokens project?

[driskull]

Yeah this can be closed