Ways to categorize CSS classes using Tailwind

Question

Ways to categorize CSS classes using Tailwind

Trying to organize classes for cleaner and more readable code. The Tailwind documentation mentions the use of "@apply" for this purpose, but as I am using the CDN, this is not working for me. So my question is, Is there a way I can achieve what I want? Perhaps by using SASS/SCSS or LESS?

Here is an example of what I am looking for:

<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">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Home</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">About Us</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Services</a>
  </li>
  <li class="px-4 py-6 md:py-0 hover:bg-yellow-500 md:hover:bg-transparent text-white duration-500">
    <a href="#" class="text-x1 md:hover:text-yellow-300 duration-500">Contact Us</a>
  </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">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">About Us</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Services</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
  <button class="button-login">
    Log In
  </button>
  <button class="button-signin">
    Sign In
  </button>
</ul>

html css sass less tailwind-css

Answer 1

Answer №1

Embrace the use of components in Tailwind. Instead of scattering classes everywhere, opt for a system that facilitates component creation and reuse.

Without the ability to use scripting languages like JS, Python, PHP, etc., creating components may be challenging. However, I can demonstrate how this can be done using React:

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">
      <a href={props.href} class="text-x1 md:hover:text-yellow-300 duration-500">{props.children}</a>
    </li>
  )
}

Utilize this component as follows:

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>
  )
}

This approach allows you to condense a long list of modifiers into a reusable component, reducing code repetition significantly.

Choose any tool or language that facilitates component creation; this is the essence of what Tailwind encourages.

Answer 2

Embrace the use of components in Tailwind. Instead of scattering classes everywhere, opt for a system that facilitates component creation and reuse.

Without the ability to use scripting languages like JS, Python, PHP, etc., creating components may be challenging. However, I can demonstrate how this can be done using React:

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">
      <a href={props.href} class="text-x1 md:hover:text-yellow-300 duration-500">{props.children}</a>
    </li>
  )
}

Utilize this component as follows:

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>
  )
}

This approach allows you to condense a long list of modifiers into a reusable component, reducing code repetition significantly.

Choose any tool or language that facilitates component creation; this is the essence of what Tailwind encourages.

Answer 3

Answer №2

I've discovered that using "@layer components" along with "@apply" is very effective in my nextjs/tailwind project

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .login-page {
        @apply bg-gray-50 dark:bg-gray-900;      
    }
    .login-container {
        @apply flex flex-col items-center justify-center px-6 py-8 mx-auto;
    }
    .login-title {
        @apply flex items-center mb-6 text-2xl font-semibold;
    }
    .login-card {
        @apply w-full bg-white rounded-lg shadow dark:border md:mt-0;
    }
}

Here is the corresponding HTML code

export default function Login() {
return (
    <section className="login-page">
        <div className="login-container">
            <a href="#" className="login-title">
                SineWave Engineering
            </a>
            <div className="login-card">
                <div className="p-6 space-y-4 md:space-y-6 sm:p-8">

Answer 4

I've discovered that using "@layer components" along with "@apply" is very effective in my nextjs/tailwind project

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .login-page {
        @apply bg-gray-50 dark:bg-gray-900;      
    }
    .login-container {
        @apply flex flex-col items-center justify-center px-6 py-8 mx-auto;
    }
    .login-title {
        @apply flex items-center mb-6 text-2xl font-semibold;
    }
    .login-card {
        @apply w-full bg-white rounded-lg shadow dark:border md:mt-0;
    }
}

Here is the corresponding HTML code

export default function Login() {
return (
    <section className="login-page">
        <div className="login-container">
            <a href="#" className="login-title">
                SineWave Engineering
            </a>
            <div className="login-card">
                <div className="p-6 space-y-4 md:space-y-6 sm:p-8">

Answer 5

Answer №3

Dealing with long lines of repetitive CSS classes can be a headache, especially when trying to apply them to multiple components.

Fortunately, TailwindCSS offers a solution for organizing component classes in separate files to easily reuse them. Here's how:

Begin by creating a file called main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
  /* ... */
}

Once your file is set up, you can use it in your components like this:

<!-- This div will resemble a card, but with square corners -->
<div class="card rounded-none">
  <!-- ... -->
</div>

For more information, check out the official document here

There's also a great article explaining the process in detail here

Answer 6

Dealing with long lines of repetitive CSS classes can be a headache, especially when trying to apply them to multiple components.

Fortunately, TailwindCSS offers a solution for organizing component classes in separate files to easily reuse them. Here's how:

Begin by creating a file called main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card {
    background-color: theme('colors.white');
    border-radius: theme('borderRadius.lg');
    padding: theme('spacing.6');
    box-shadow: theme('boxShadow.xl');
  }
  /* ... */
}

Once your file is set up, you can use it in your components like this:

<!-- This div will resemble a card, but with square corners -->
<div class="card rounded-none">
  <!-- ... -->
</div>

For more information, check out the official document here

There's also a great article explaining the process in detail here

Answer 7

Answer №4

Did you attempt this:

<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 8

Did you attempt this:

<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 9

Answer №5

While you requested SASS/LESS type approaches, I believe that may introduce unnecessary complexity. A simple JS solution could suffice.

My approach involves replacing CSS or StyledComponents with a JSON object of class names and a utility function to combine them into a single string.

First, the utility function should be placed in a shared location:

// turns a JSON object's values into a single string (keys are irrelevant)

export const classify = (classes) => Object.values(classes).join(' ')

Next, create a file like styles.js adjacent to index.js with the following content:

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 approach mimics a CSS file structure. While variables need to be named, it helps to cut down on file clutter. Additionally, it provides a clearer HTML structure compared to component names. The JSON objects allow for flexible organization and reduced cognitive load.

For the HTML/JSX part:

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>
)

This approach closely resembles the CSS workflow, enabling easy class organization within JSON objects. It eliminates the need to deal with long strings of classes when applying them to components. Additionally, utility styles can be created and combined using template strings.

For example:

import * as utilStyles from 'utils/styles'
import * as styles from './styles'

<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>
...
</section>

Answer 10

While you requested SASS/LESS type approaches, I believe that may introduce unnecessary complexity. A simple JS solution could suffice.

My approach involves replacing CSS or StyledComponents with a JSON object of class names and a utility function to combine them into a single string.

First, the utility function should be placed in a shared location:

// turns a JSON object's values into a single string (keys are irrelevant)

export const classify = (classes) => Object.values(classes).join(' ')

Next, create a file like styles.js adjacent to index.js with the following content:

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 approach mimics a CSS file structure. While variables need to be named, it helps to cut down on file clutter. Additionally, it provides a clearer HTML structure compared to component names. The JSON objects allow for flexible organization and reduced cognitive load.

For the HTML/JSX part:

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>
)

This approach closely resembles the CSS workflow, enabling easy class organization within JSON objects. It eliminates the need to deal with long strings of classes when applying them to components. Additionally, utility styles can be created and combined using template strings.

For example:

import * as utilStyles from 'utils/styles'
import * as styles from './styles'

<section className={`${utilStyles.shadowPanel} ${styles.mainSection}`>
...
</section>

Answer 11

Answer №6

Two ways to group tailwind classes: one with nodejs and the other without nodejs using CDN. It's easy with a script - create a variable with multiple tailwind classes and insert it into the DOM.

You can group the classes with vanilla js and apply them to the DOM. Add the script at the end of the HTML code as shown below.

<body>
<ul class="nav-elemnts">
  <li class="nav-element">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">About Us</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Services</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
  <button class="button-login">
    Log In
  </button>
  <button class="button-signin">
    Sign In
  </button>
</ul>
<script>
let nav-link="text-x1 md:hover:text-yellow-300 duration-500"
Array.from(document.getElementsByClassName("nav-link")).forEach((el)=>el.className=nav-link)
</script>
</body>

Answer 12

Two ways to group tailwind classes: one with nodejs and the other without nodejs using CDN. It's easy with a script - create a variable with multiple tailwind classes and insert it into the DOM.

You can group the classes with vanilla js and apply them to the DOM. Add the script at the end of the HTML code as shown below.

<body>
<ul class="nav-elemnts">
  <li class="nav-element">
    <a href="#" class="nav-link">Home</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">About Us</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Services</a>
  </li>
  <li class="nav-element">
    <a href="#" class="nav-link">Contact Us</a>
  </li>
  <button class="button-login">
    Log In
  </button>
  <button class="button-signin">
    Sign In
  </button>
</ul>
<script>
let nav-link="text-x1 md:hover:text-yellow-300 duration-500"
Array.from(document.getElementsByClassName("nav-link")).forEach((el)=>el.className=nav-link)
</script>
</body>

Answer 13

Answer №7

Consider applying the 'group' class to the parent element and then manipulating the group subclasses:

<div class="group p-4">
  <p class="group-hover:bg-red-400">lorem ipsum</p>
</div>

Upon hovering over the div element, the background color of the p elements will change to red.

Answer 14

Consider applying the 'group' class to the parent element and then manipulating the group subclasses:

<div class="group p-4">
  <p class="group-hover:bg-red-400">lorem ipsum</p>
</div>

Upon hovering over the div element, the background color of the p elements will change to red.

Ways to categorize CSS classes using Tailwind

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Select only eBook files using this HTML form: {file-type}

jQuery .html() function malfunctioning

The application of Tailwind style does not appear to be working within the Material-ui Drawer component in NextJs

Turn off automatic resizing of iframes

Retrieving text snippet from an HTML document using .NET

A method to extract the value of an array by referencing the primary key value

Loading animation reminiscent of a whirlpool, similar to the movement

Navigate to the adjacent IDs

Having trouble aligning the unordered list with the input

Creating diagonal ribbon designs can add a unique and dynamic touch to any

The comparison between dynamically adding elements through Javascript and hiding them using CSS

Unable to apply .png image using the content property in a Symfony project

Python Selenium for Element Detection

Filtering Tables with AngularJS

Experiencing difficulties with setting the width of owl carousel

Incorporating Only XSD Files into an HTML Input Tag: A Simple Guide

Eliminate any height changes in the ul element during a CSS transition

Solve woff file imports using Rollup

PHP multiple file uploads can allow users to upload and

The mdb navigation bar seems to constantly change its height