reuse custom utilities in other custom utility classes

[oVerde]

What?

I was unable to find anything in the documentation about how to add base and/or component styling.

Why?

I would like to organise my styling in a file like ITCss.

How?

Maybe declaring like the existing addUtilities

module.exports = {
  plugins: [
    plugin(( { addBase, addComponents, addUtilities } ) => {
      addBase({
        btn: `px-4 py-1 rounded-full`,
        container: `flex content-justify  align-center`,
      }),
      addComponents({
        "btn-primary": `btn bg-teal-800 text-white`,
        "container-center": `container flex-col items-center justify-center`
      }),
      addUtilities({
        /**** you got the idea ****/
      })
    }) ],
};

Anything Else?

I think it should be possible to put everything inside addUtilities without using inheritance, right?

[jaredh159]

the only part of the tailwind plugin api supported by this library is addUtilities, sorry.

[oVerde]

Is there any impediment to implement that?

I think I could if you partially point me where and how 😊

[jaredh159]

what's your use case? specifically, are you working on a RN web project perhaps?

[oVerde]

I'm affraid to respond that it's a web and mobile RN project.

Wanted to have my base and components theme layers right.

[jaredh159]

honestly, i have no idea what those parts of the tailwind plugin API even do. my hunch is that they're not terribly applicable to RN native projects, because there's no concept of a CSS cascade, etc. i'm trying to keep this library small and focused on just the RN native use case.

so, i'm afraid i can't really even point you partially in the right direction.

i am open to looking at and merging a PR, but only if the API's are generally useful to RN native projects as well. sorry if that's a bummer, it's just sort of the scope I've decided on for this project, to keep it manageable for me to maintain (and because i personally don't do any RN Web work)

[oVerde]

I believe I expressed myself poorly, and my superpower is to confuse people :disappointed: forget about the web part of it, it is really not related.

Is it possible to reuse utilities on another?

  addUtilities({
    btn: `px-4 py-1 rounded-full`,
    "red-btn": `btn bg-red-800`,
  }),

Or, could we just create two different Utilities and use them on the next declaration of the Utilities?

  addUtilities1({
    btn: `px-4 py-1 rounded-full`
  }),
  addUtilities2({
    "red-btn": `btn bg-red-800`
  })

Want to sanely create a theme for my app.

[jaredh159]

sorry for the delay getting back to you, was camping for a few days.

yes, i think i did misunderstand you. if you're just wanting to re-use custom utilities within other utilities, that I understand the motivation for, and could see how it would be generally useful.

i'm not really sure tbh if it works currently or not, my guess is that it doesn't (and I suppose you probably tried and it wasn't working or else you wouldn't have opened this issue). anyway, if you were interested in trying to implement the feature, i think the right area to look is here:

https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/src/create.ts#L27-L36

[jaredh159]

also, you might be helped by looking at (and extending while developing) the tests for custom utilities here:

https://github.com/jaredh159/tailwind-react-native-classnames/blob/master/src/__tests__/custom-utils.spec.ts