This repo contains starter code for React using Vite to demonstrate how Twin Fold is implemented.

1. Install VSCode Inline Fold

Visual Studio Marketplace - GitHub Repo

2. Install twin.macro:

> npm i twin.macro

2.1 Import to Twin:

import 'twin.macro'

3. Update twinFold.regex setting to the following:

{
    "inlineFold.regex": "(tw)=(({(`|))|(['\"`]))(.*?)(\\2|(\\4)})"
}

4. Add Tailwind classes to your JSX/TSX code using the following:

<h1 tw="text-sm"...

5. (Optional) Tweak additional VSCode Inline Fold settings to suit your preferences.

6. Enjoy folded Tailwind classes while maintaining visibility of your own classes!