@glideapps/prettier-plugin-glide-tailwind

Prettier Plugin Tailwind

Format long tailwind classes with Prettier plugin

Supports

• CSS (@apply directive)
• ReactJS (JSX, TSX)
• twin.macro

Go from this:

<div
    tw="px-4 font-normal text-center w-32 h-32 object-cover mb-2 gp-sm:text-base gp-lg:text-lg gp-xl:(text-xl text-right)"
></div>

To this:

<div
    tw="px-4 font-normal text-center text-s mw-32 h-32 object-cover mb-2
       	gp-lg:text-lg
       	gp-xl:(text-xl text-right)"
></div>

This plugin reads your tailwind.config.js to sort tailwind classes in your project.

Installation

Install Prettier and the plugin into your project locally:

Glide engineers, please install this in /app

npm install --save-dev @glideapps/prettier-plugin-glide-tailwind

Testing locally

First thing to do is make sure you have modified the:

• SET_CONFIG_PATH
• NODE_CONFIG_PATH that are found in src/utils/testing-envs.ts

    yarn install
    yarn build
    yarn package
    npm run test

results will be saved to test_formatted.tsx