Possibility to add presets

[oemer-aran]

Let's say you have a typography like ~text-xl/3xl that you want to use on many places. It would be convenient to have preset like ~text-3xl or ~text-h1 which would apply ~text-xl/3xl behind the scenes.

If this is already possible, I think it would be fair to put on the fluid.tw website.

[firxworx]

If you think about it a "preset" in the context you are referring to then it is arguably the same as a css class.

For clarity note tailwind has a completely different concept of what a preset is (it is like a "theme preset"): docs.

In tailwind you can already define things like spacing, gap, etc. in a theme or tailwind preset, e.g. https://tailwindcss.com/docs/customizing-spacing.

You can also write plugins that add variants/utilities/etc. Adding your own would definitely be a good avenue to define whatever type presets you want.

If you do choose to customize your theme you may need to also customize your tailwind-merge config in tandem (if you use tailwind-merge or something that depends on it like cn()) so it "knows" about your new additions and what they impact so it can correctly merge classes that include your additions.

Finally you can also write custom classes in global CSS.

Note global styles/CSS is generally better done in a plugin than in a CSS file so tailwind is "aware" of what's in it. Adding extra styles and CSS variable definitions in global CSS is popular because that's how popular component libraries like shadcn/ui document their installation but it isn't recommended.

The challenge I have faced is I'm not sure how to use @apply with fluid-tailwind or use the theme() function to reference fluid combinations like ~text-xl/3xl. If that were easy to do then one could easily define themes that include the sorts of things you're after.

For example in a tailwind plugin this would be an implementation of the ~text-h1 you describe in your question:

      addComponents({
        '.my-h1': {
          '@apply ~text-xl/3xl': {},
        },

I filed an issue that relates to not being able to do this because of how fluid-tailwind works with the custom extractor (tailwind on its own won't recognize the ~ and fails to build the stylesheet citing unexpected/invalid characters): #43. I've been doing a lame workaround of copying the CSS output by fluid-tailwind into my tailwind presets in the meantime -- this works but isn't flexible or maintainable.