How to group clases in CSS - Tailwind - html

Question

I am trying to group clases so the code will be cleaner and legible. In the documentation of Tailwind it talks about "#apply", that can be used for this objective but I am using the CDN and therefore this is not working for me. So my question is, ¿Is there any form I can accomplish what I am looking for? Maybe by using SASS/SCSS or LESS?
Here is an example of what I wnat:
<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
<li class="nav-element">
Home
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
About Us
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
Services
</li>
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
Contact Us
</li>
<button class="md:w-auto w-full bg-transparent text-white font-[Poppins] duration-500 px-6 py-2 hover:bg-white hover:text-gray-800 border border-white border-dotted rounded-lg">
Log In
</button>
<button class="md:w-auto w-full bg-yellow-500 text-white font-[Poppins] duration-500 px-6 py-2 md:mx-4 hover:bg-yellow-600 rounded-lg">
Sign In
</button>
</ul>
<ul class="nav-elemnts">
<li class="nav-element">
Home
</li>
<li class="nav-element">
About Us
</li>
<li class="nav-element">
Services
</li>
<li class="nav-element">
Contact Us
</li>
<button class="button-login">
Log In
</button>
<button class="button-signin">
Sign In
</button>
</ul>

Answer 1

Tailwind encourages you to use components. Instead of copy pasting the classes all over the place, you should use a system that allows you to create and use components.
Since your question is HTML + CSS only, you don't really have the right tools for this. But if you were using a scripting language like JS, Python, PHP etc., you could create components from elements and reuse them. Since I am familiar with React framework, I can show an example of that:
function NavElement(props) {
return (
<li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
{props.children}
</li>
)
}
and then use it as
function NavElements() {
return (
<ul class="md:flex md:items-center z-[-1] md:z-auto md:static absolute bg-gray-800 w-full left-0 md:w-auto md:py-0 py-4 md:pr-0 pr-7 md:pl-0 pl-7 md:opacity-100 opacity-0 top-[-400px] transition-all ease-in duration-200">
<NavElement href="/">Home</NavElement>
<NavElement href="/services">Services</NavElement>
<NavElement href="/about-us">About us</NavElement>
</ul>
)
}
As you can see, with this approach, you extract the huge list of modifiers into a small component that you can use multiple times without much repetition in the code.
You are free to choose any tool, language, system that will enable making components. That is what Tailwind kind of expects you to do.

Answer 2

I know you asked for SASS/LESS type approaches, but I think that adds additional complexity that you may not need. I think some simple JS would be a good candidate solution.
The way I've done it is to sort of replace CSS or StyledComponents with a JSON object of class names and a utility function to turn these into one big string.
First, the utility. Put this somewhere shared:
// turns a JSON object's values into a single string (keys are irrelevant)
export const classify = (classes) => Object.values(classes).join(' ')
Then in a file like styles.js that's next to the index.js, I'd have:
import { classify } from 'shared/utils'
export const nav = classify({
base: 'absolute bg-gray-800 w-full left-0 pr-7 pl-7 py-4 opacity-0 top-[-400px] z-[-1]',
animation: 'transition-all ease-in duration-200',
larger: 'md:flex md:items-center md:z-auto md:static md:w-auto md:py-0 md:pr-0 md:pl-0 md:opacity-100'
})
export const navItem = classify({
base: 'px-4 py-6 hover:bg-yellow-500 text-white',
resp: 'md:py-0 md:hover:bg-transparent',
anim: 'duration-500'
})
This is just like your CSS file. Yes, you have to name the variables, but you'd also have to name your components doing it the other way and this keeps things way less littered with files. You also get the benefit of seeing your HTML structure rather than a bunch of component names (which are more than likely just divs, smh). Also, you can have any number of key/values in your JSON, however you see fit to organize for reduced cognitive load while maintaining.
Then, the HTML/JSX:
import * as styles from './styles'
export default Component = (props) => (
<ul className={styles.nav}>
<li className={styles.navItem}> ... </li>
<li className={styles.navItem}> ... </li>
<li className={styles.navItem}> ... </li>
</ul>
)
The thing I like about this approach is that it's very similar to the CSS workflow and the JSON objects allow you to organize your class names in any way you want (ideally not doing it nested or you'll need a more complex classify()). Using components, you still have big long strings to mess with which is annoying when you have tens of classes applied. You can even do these in the same file if you'd like, it's just JavaScript.
You can even create utility styles/classes this way and concat them with template strings:
import * as utilStyles from 'utils/styles'
import * as styles from './styles'
<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>
...
</section>

Answer 3

have you tried doing:
<style type="text/tailwindcss">
#layer components {
.some-class {
#apply px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500;
}
}
</style>

Answer 4

You should add 'group' class to parent and after work with group subclasses:
<div class="group p-4">
<p class="group-hover:bg-red-400">lorem ipsum</p>
</div>
after this code if you hover on div element, p elements backgroundColor will be change to red.