https://github.com/radespratama/windsplit

Small utility to format long classnames with template literals ⚡
https://github.com/radespratama/windsplit

javascript utility

Last synced: about 6 hours ago
JSON representation

Small utility to format long classnames with template literals ⚡

• Host: GitHub
• URL: https://github.com/radespratama/windsplit
• Owner: radespratama
• License: mit
• Created: 2022-08-19T15:02:45.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-08-20T13:56:06.000Z (about 2 years ago)
• Last Synced: 2024-09-03T21:21:55.582Z (2 months ago)
• Topics: javascript, utility
• Language: JavaScript
• Homepage: https://windsplit.vercel.app
• Size: 4.88 KB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Documentation

Utility originally created to deal with long Tailwind classnames.

To make our code more readable, we extract our TailwindCSS classes into variables, for example:

```javascript

const twStyle = `

  flex-wrap

  flex-grow

  max-w-screen-lg

  mx-auto

  px-4

`;

```

The issue with writing classes this way is that they are rendered as-is in the DOM.

Example:

```javascript

  /* ... */

```

Using the `wtl` util formats classnames so they are rendered in a more standard way in the DOM.

Example:

```javascript

  Good morning 🌟

```

# Installation

```javascript

npm install windsplit

```

```javascript

yarn add windsplit

```

# Usage

Wrap your classnames inside `wtl`.

```javascript

import wtl from "windsplit";

const buttonClasses = wtl(`

  bg-gray-800

  text-white

  p-1

  rounded-sm

`);

```

You can also use conditional classes:

```javascript

import wtl from "windsplit";

const buttonClasses = wtl(`

  bg-gray-800

  text-white

  p-1

  rounded-sm

  ${someState && "bg-sky-600"}

`);

```