Skip to content

Latest commit

 

History

History
42 lines (27 loc) · 1.08 KB

README.md

File metadata and controls

42 lines (27 loc) · 1.08 KB
Raw

Twin Fold

Hides the verbosity of Tailwind classes while still keeping your custom classes visible

twin fold gif

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

Getting Started:

  1. Install VSCode Inline Fold

Visual Studio Marketplace - GitHub Repo

  1. Install twin.macro:
> npm i twin.macro

2.1 Import to Twin:

import 'twin.macro'
  1. Update twinFold.regex setting to the following:
{
    "inlineFold.regex": "(tw)=(({(`|))|(['\"`]))(.*?)(\\2|(\\4)})"
}
  1. Add Tailwind classes to your JSX/TSX code using the following:
<h1 tw="text-sm"...

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

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