Tailwind Class Converter: Simplify Custom Values to Defaults

Now you can write your preferred properties without worrying about default values: max-w-[896px] will automatically convert to the default max-w-5xl, saving space in your CSS bundle. The same applies to border-radius, and other properties listed below — no need to double-check that ml-[56px] is just ml-14.

Got custom extended values in your tailwind.config.js? No problem! For example, if you've added extra letterSpacing values beyond what's in the default config, they'll work without any problems.

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  ...
  theme: {
    extend: {
      letterSpacing: {
        tight: '-0.02em',
        tighter: '-0.04em',
      }
    }
  }
}

Now, if you type leading-[-0.02em] elsewhere in your components, it will also be converted to leading-tight.

With this extension, you can easily track and convert custom values for various properties, including:

• max-width, min-width, width
• max-height, min-height, height
• size
• font-size
• line-height
• letter-spacing
• margins (all sides)
• paddings (all sides)
• border-radius
• border-width (all sides)
• blur
• flex-basis
• gap
• top/bottom/right/left/inset

Advantages? A lot! (at least 3)

• Reduce your bundle size
• Keep your code consistent with Tailwind's default values effortlessly
• Save time, effort and spend it on the really important things.

Extension Workflow

No additional settings are required. Simply:

0. Ensure that you have a tailwind.config.js in the root project folder
1. Open the target file
2. Open command palette by pressing (Ctrl+Shift+P or Cmd+Shift+P on Mac)
3. Type Run Tailwind Converter and press Enter
4. (optional) To view the list of changes, click on the Chess Horse icon in the right sidebar.

OR

0. The same
1. The same
2. Press Shift+Alt+L (shotrcut for launching extention in opened and focused file)
3. (optional) To view the list of changes, click on the Chess Horse icon in the right sidebar.