https://github.com/mokshit06/tw-variants

Tailwind variant grouping without increasing CSS size
https://github.com/mokshit06/tw-variants

Last synced: 2 months ago
JSON representation

Tailwind variant grouping without increasing CSS size

• Host: GitHub
• URL: https://github.com/mokshit06/tw-variants
• Owner: Mokshit06
• Created: 2022-12-18T13:28:26.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-18T14:14:30.000Z (about 2 years ago)
• Last Synced: 2024-09-30T09:16:35.465Z (3 months ago)
• Language: TypeScript
• Homepage: https://npm.im/tw-variants
• Size: 41 KB
• Stars: 12
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
tw variants




  Tailwind variant grouping without increasing CSS size



## Introduction

Tailwind doesn't support variant-grouping out of the box because it leads to tons of duplicate CSS being generated as compared to using individual classes (as we can see in this [tweet](https://twitter.com/adamwathan/status/1461519824828473359))

This is because with the grouped syntax like `focus:(font-bold underline)` each group leads to a new CSS selector being generated, and the CSS generated for `focus:font-bold` and `focus:underline` can't be reused.

`tw-variants` overcomes this by expanding this grouped syntax at build time into individual classes. So now when tailwind scans the files, it sees `focus:(font-bold underline)` as `focus:font-bold focus:underline` since it has been expanded before tailwind sees it.

This way you can use grouped-syntax while not having to worry about the css size.

## Installation

```bash

npm install tw-variants

```

Add the babel plugin to your babel config (`.babelrc`) :-

```json

{

  "plugins": ["tw-variants/babel"]

}

```

Add `.tw-variants` to your `.gitignore`. This is where `tw-variants` stores the expanded CSS for tailwind to scan

```

.tw-variants

```

And add the same to the `content` section of your `tailwind.config.js`:-

```js

module.exports = {

  content: [

    // ...

    './.tw-variants',

  ],

  // ...

};

```

## Usage

Just import `tw` from `tw-variants` and use it like a tagged template literal :-

```js

import { tw } from 'tw-variants';

const button = tw`font-semibold border rounded focus:(font-bold underline)`;

```

You can't use `${variable}` inside `tw`, so instead of doing:-

```js

import { tw } from 'tw-variants';

const button = tw`font-semibold border rounded focus:(font-bold underline)`;

const redButton = tw`${button} bg-red-500`;

```

Instead do:-

```js

import { tw } from 'tw-variants';

const button = tw`font-semibold border rounded focus:(font-bold underline)`;

const redButton = `${button} ${tw`bg-red-500`}`;

```

The grouping-syntax `tw-variants` uses is the same as the one used by `twind`. You can view the supported syntax [here](https://twind.dev/handbook/grouping-syntax.html)

## Tailwind CSS IntelliSense

If you're using the "Tailwind CSS IntelliSense" Visual Studio Code extension, you can enable autocompletion inside `tw` by adding the following to your `settings.json`:

```json

{

  "tailwindCSS.experimental.classRegex": ["tw`([^`]*)"]

}

```