Formatting and sorting for glide tailwind classes

Usage no npm install needed!

<script type="module">
  import glideappsPrettierPluginGlideTailwind from 'https://cdn.skypack.dev/@glideapps/prettier-plugin-glide-tailwind';


Prettier Plugin Tailwind

Format long tailwind classes with Prettier plugin


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

Go from this:

    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)"

To this:

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

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


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:

  • 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