@glideapps/prettier-plugin-glide-tailwind

4.2.2 • Public • Published

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

Dependents (0)

Package Sidebar

Install

npm i @glideapps/prettier-plugin-glide-tailwind

Weekly Downloads

2

Version

4.2.2

License

MIT

Unpacked Size

57 kB

Total Files

46

Last publish

Collaborators

  • josephglanvilleglide
  • jessenewland-glide
  • tristanlabbe
  • ebinabo
  • christian.giordano.glide
  • timwellswa
  • lmarburger
  • alex-corrado-at-glide
  • mitul-glide
  • djp_glide
  • gurmen-glide
  • jeremy_at_glide
  • simonfl3tch3r
  • rdaigle
  • ivoelbert
  • maurimura7
  • benipsen
  • jassmith87
  • sr-glide
  • bryhasanpm
  • mark.probst
  • dvdsgl