Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Create utility functions to separate classnames by categories

See original GitHub issue

Summary

This will improve performance of autocompletion in addition to organizing classnames by categories

example:

classnames(
	textColor("text-black", "hover:text-red-600", "active:text-red-800"),
	display("flex", "md:block"),
	flexDirection("flex-row-reverse"),
)

I’m willing to implement this feature

Issue Analytics

State:
Created 2 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

4reactions

hydRAngercommented, Dec 20, 2021

Will there be a chance to define this on/off? I mean use categories as default, but let the user disable it (then 'show autocompletion of all classnames as early version).

2reactions

muhammadsammycommented, Jan 14, 2022

@hydRAnger Sorry for the late reply! The problem is that tailwindcss@v3 has JIT mode on all the time which generates a huge number of classnames that make the generated file over 100mb and TS engine can’t handle them, the autocompletion and validation does not work with all classnames loaded at once

Top Results From Across the Web

Utility Functions | benmccormick.org

Utility Functions. As I've gone through projects over time, I've found a few functions that I end up creating for every significant project ......

using css modules how do I define more than one style name

You can add multiple classes using css modules as follows: className={`${styles.description} ${styles.yellow}`}. e.g. function Footer( props) { return ...

The Role of Utility Classes in Scalable CSS - David Clark

With utility classes, it's up to HTML authors to apply the right cluster of styles to the right elements. A good component class...

Build your own DOM utility (Part 2) - David Banks

Each DOM element has a className property which stores all classes currently set on that element as a string, with a single space...

Chainable class names for CSS Modules in React - Sandro Roth

We will build our own utility function that works with chainable class names that can be conditionally applied.