https://github.com/danvc/tailtidy
An organized way to use TailwindCSS classes
https://github.com/danvc/tailtidy
Last synced: about 2 months ago
JSON representation
An organized way to use TailwindCSS classes
- Host: GitHub
- URL: https://github.com/danvc/tailtidy
- Owner: danvc
- Created: 2023-03-03T12:44:12.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-06T14:17:30.000Z (over 3 years ago)
- Last Synced: 2025-08-09T17:02:05.649Z (11 months ago)
- Language: JavaScript
- Size: 19.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tailtidy
`TailTidy` is a library that has as intention to help you organize your Tailwind classes in the way you think this should be organized.
## Installing using yarn
```
yarn add --dev tailtidy
```
## Installing using npm
```
npm add --save-dev tailtidy
```
## What problem this solve?
This helps you to organize your classes by a logical and structured way. When the component start to receive a lot of conditions where the shape should be changed according a specific breakpoint, like, *"change the text color to black when the breakpoint is `xm` but when it has achieved `md`, change the text color to pink"*.
## The idea is simple:
- It's like styled css, but, using classes.
The idea behind `tidyUp` is that it will help you to organize and visualize better how the classes should be organized
according each aspect.
There's no right way to shape the structure, so, you're able to define the structured in the way that you want, in the way that
you'll feel comfortable to maintain.
An organized way to use TailwindCSS classes:
````
const classes = tidyUp({
// component Title
title: {
// well, whant the breakpoint is small, I want to show a red background with the font-size small
sm: {
text: "text-sm",
bg: "bg-red",
},
// but when the breakpoint reach the md size, I want to display the background with the color orange... the font-size will be normal
md: {
text: "md:text-base",
bg: "md:bg-orange",
},
// but when the breakpoint reach lg, ah man, then, we need to rock this world and change the background color to blue and the font large
lg: {
text: "lg:text-lg",
bg: "lg:bg-blue",
},
},
// component Pragraph
paragraph: {},
});
````
Of course this example is stupid, however, the library is not stupid, mainly when you're dealing with elements that has dozens of classes. Urgh!
Use
````
Test
````
The result
````
Test
````
You can call the method `getClasses` on all properties that are objects. Given the example above, you could be calling:
````
classes.title.getClasses();
````
which would return:
````
text-sm bg-red md:text-base md:bg-orange lg:text-lg lg:bg-blue
````
````
classes.title.sm.getClasses();
````
which would return:
````
text-sm bg-red
````
and so on.