[Feature] Add function/at-rule to get a property value from a utility ruleset

[jasonhulbert]

Let me get this out of the way: Tailwind is awesome and I'm grateful for what it has done to popularize the concept of "utility-first" styles.

How I arrived at this suggestion is a long story and may warrant it's own feature request / conversation.

The short version is this:

The organization that I work for has adopted Angular as the framework of choice. Our engineers (myself included) were not comfortable with the additional dependencies and tooling that would be needed for a postcss-based library within an Angular project. I'm not looking to start an argument about whether or not @angular-builder/custom-webpack or pre-build scripts or any other workarounds are a good solution (in the context of Angular). I'm just providing some back story.

So...my team created a sass plugin/importer that is fundamentally inspired by Tailwind. It's only true dependency is sass and requires no additional configuration for angular cli.

DON'T LOOK AWAY YET! THIS ISN'T ANOTHER QUESTION ABOUT SASS OR USAGE IN AN ANGULAR PROJECT!

Using our sass library looks like this:

@use '[library-name]:utilities' as utils;

.example {
  @include utils.apply(
    'w-12', 
    'h-12'
  );

  min-width: utils.get-apply('w-8', 'width'); // <--- This is the relevant portion
}

The get-apply function in that example is the basis for my feature request. I think this could be very useful for Tailwind users - to be able to "reach into" a utility and get property value within a plugin ruleset.

• It would help avoid having to configure a bunch of infrequently used rules. In the above example, we didn't have to add any additional min-w- sizing scale rules.
• It encourages users to avoid hard-coded or magic values to compensate for a missing utility value.
• It becomes very powerful when combined with css calc(), (i.e. calc(get-apply('w-32', 'width') * 0.5))

Something like this?

@import 'tailwind:utilities';

.example {
  @apply w-8 h-8;

  min-width: get-apply('w-8', 'width'); // 2rem
}

---

I actually would love to contribute to Tailwind so if folks think this would be useful, I'd be happy to work on a PR (if the core team can suggest a starting point)

[jasonhulbert]

@adamwathan Any thoughts on this?

[adamwathan]

What’s your issue with using the existing theme function for this?

[jasonhulbert]

Well, TBH - I thought the theme function was only used in the js configs and didn't realize it was also available in stylesheets. I should have looked into this further before posting the suggestion since I'm not actually using the library. 🤭

That being said, it seems the difference between the two would be that get-apply can get any property value in any generated ruleset instead of referring to config values. But without any practical example to show why one would be better than the other, this suggestion might be moot.

Either way, thanks for you response!