https://github.com/netlify/classnames-template-literals
Small utility to format long classnames with template literals
https://github.com/netlify/classnames-template-literals
Last synced: about 1 month ago
JSON representation
Small utility to format long classnames with template literals
- Host: GitHub
- URL: https://github.com/netlify/classnames-template-literals
- Owner: netlify
- License: mit
- Created: 2021-03-02T20:58:14.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-05-28T05:34:24.000Z (about 2 years ago)
- Last Synced: 2025-05-12T14:29:43.518Z (about 1 month ago)
- Language: JavaScript
- Size: 57.6 KB
- Stars: 75
- Watchers: 4
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# classnames-template-literals
Utility originally created to deal with long Tailwind classnames.
To make our code more readable, we extract our Tailwind classes into variables, for example:
```javascript
const twClasses = `
tw-sr-only
focus:tw-not-sr-only
tw-bg-teal-darker
tw-text-white
tw-block
tw-text-sm
tw-l-0
`;
```
The issue with writing classes this way is that they are rendered as-is in the DOM.
Example:
```javascript
Hello world
```
Using the `ctl` util formats classnames so they are rendered in a more standard way in the DOM.
Example:
```javascript
Hello world
```
## Installation
```javascript
npm install @netlify/classnames-template-literals
```
## Usage
Wrap your classnames inside `ctl`.
```javascript
import ctl from "@netlify/classnames-template-literals";
const buttonClasses = ctl(`
bg-black
text-white
p-1
rounded-sm
`);
```
You can also use conditional classes:
```javascript
import ctl from "@netlify/classnames-template-literals";
const buttonClasses = ctl(`
bg-black
text-white
p-1
rounded-sm
${someState && "bg-pink"}
`);
```