@glideapps/prettier-plugin-glide-tailwind

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';
</script>

README

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