https://github.com/ironmanvim/tailwindcssx

Classify TailwindCSS classnames
https://github.com/ironmanvim/tailwindcssx

css tailwind tailwindcss

Last synced: 28 days ago
JSON representation

Classify TailwindCSS classnames

• Host: GitHub
• URL: https://github.com/ironmanvim/tailwindcssx
• Owner: ironmanvim
• Created: 2020-12-15T17:42:18.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-12-15T20:41:08.000Z (about 4 years ago)
• Last Synced: 2024-10-10T23:18:24.046Z (4 months ago)
• Topics: css, tailwind, tailwindcss
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/tailwindcssx
• Size: 23.4 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# TailwindCSSX

Group TailwindCSS classnames

Tried of managing ungrouped tailwindcss classnames.

Use TailwindCSSX to group tailwindcss classnames.

## Usage

Using Array

```jsx

import twx from "tailwindcssx";

export default const App = () => {

    return (

        


            Group classnames

        

    )

}


/* 

result classname: 'border-red-100 text-sm'

*/

```

You can use array in an array

```jsx

import twx from "tailwindcssx";

export default const App = () => {

    return (

        


            Multiple Groups

        

    )

}


/*

result classname: 'border-red-500 text-sm text-red-400 font-semibold'

*/

```

You can disable or enable groups with variables

```jsx

import twx from "tailwindcssx";

export default const App = ({theme}) => {

    return (

        


            Multiple Groups with conditions.

        

    )

}


/*

result classname: 

if theme === 'red': 'font-semibold border-red-500 text-sm'

if theme === 'blue: 'font-semibold border-blue-500 text-md'

*/

```

You can have separate group for each variant using object syntax

```jsx

import twx from "tailwindcssx";

export default const App = () => {

    return (

        


            Object Grouping

        

    )

}


/*

result classname: 'border-red-500 hover:border-blue-500 md:text-red-600 md:hover:text-green-600 md:hover:text-sm'

*/

```

If you have a custom separator other than default separator ':'.

```jsx

// twx.js

import twx from "tailwindcssx";

export default (classNames) => {

    return twx(classNames, '', '_'); // last argument is the separator

}

```

```jsx

import twx from "./twx";

export default const App = () => {

    return (

        


            With Custom Separator

        

    )

}


/*

result classname: 'border-red-500 hover_border-blue-500 md_text-red-600 md_hover_text-green-600 md_hover_text-sm'

*/

```