CSS Tailwind Minifier is a Visual Studio Code extension created to help developers minify CSS, HTML classes, and Tailwind CSS utility classes quickly from the editor.
It is designed for developers who work with modern frontend projects using Tailwind CSS, Angular, React, Vue, Laravel Blade, plain HTML, or traditional CSS.
CSS Tailwind Minifier is a lightweight extension that helps reduce unnecessary spaces, line breaks, and extra formatting from CSS or Tailwind-related code.
This is useful when you want cleaner, shorter, and more optimized code snippets directly inside Visual Studio Code.
- Minify selected CSS code.
- Minify Tailwind CSS utility classes.
- Remove unnecessary spaces and line breaks.
- Clean long class attributes in HTML, Angular, React, Vue, or Blade files.
- Works directly from the Command Palette.
- Lightweight and easy to use.
- Useful for frontend optimization and code cleanup.
When working with Tailwind CSS, class attributes can become very long and difficult to manage. This extension helps you quickly clean and compact those classes without manually editing every space or line break.
It is especially useful for:
- Tailwind CSS projects.
- Angular components.
- React components.
- Vue components.
- Laravel Blade templates.
- Static HTML pages.
- CSS snippets.
- UI component cleanup.
| Without CSS Tailwind Minifier | With CSS Tailwind Minifier |
|---|---|
| Long class attributes with extra spaces | Compact and cleaner class attributes |
| Manual cleanup required | One command cleanup |
| Messy CSS snippets | Minified CSS snippets |
| Slower repetitive formatting work | Faster code optimization |
| Harder to copy compact code | Easier to copy and reuse code |
<div class="
bg-blue-500
text-white
px-4
py-2
rounded-lg
shadow-md
hover:bg-blue-600
">
Button
</div><div class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600">
Button
</div>.button {
background-color: #2563eb;
color: white;
padding: 10px 16px;
border-radius: 8px;
}.button{background-color:#2563eb;color:white;padding:10px 16px;border-radius:8px;}- Open a file in Visual Studio Code.
- Select the CSS code, HTML class attribute, or Tailwind CSS classes you want to minify.
- Open the Command Palette:
Ctrl + Shift + P- Search for:
CSS Tailwind Minifier- Run the command.
- The selected code will be minified automatically.
This extension can be useful in files such as:
.html.css.scss.ts.tsx.jsx.vue.blade.php.php.js
No additional configuration is required.
Just install the extension and start using it from the Command Palette.
This extension does not add custom VS Code settings yet.
Future versions may include configurable options for:
- Keeping or removing line breaks.
- Sorting Tailwind classes.
- Formatting class attributes.
- Minifying only selected patterns.
- Auto-minify on save.
There are no known issues at the moment.
If you find a bug or have a suggestion, please report it through the project repository or Marketplace feedback section.
Planned improvements:
- Tailwind class sorting.
- Auto minify on save.
- Support for custom minification rules.
- Context menu option.
- Better Angular, React, and Vue support.
- Class attribute detection.
- Configuration options from VS Code settings.
Angelito Systems S.A.C. is a technology-focused company dedicated to creating digital solutions, software tools, web platforms, mobile applications, and developer utilities.
The goal of Angelito Systems S.A.C. is to build practical, modern, and efficient software that helps businesses, developers, and users improve their digital workflows.
This extension is part of that vision: creating simple but useful tools that make development faster, cleaner, and more productive.
Created by Angel Calderón Mantilla.
Published under Angelito Systems S.A.C.
Angelito Systems S.A.C.
Developer tools, software solutions, web systems, mobile apps, and productivity utilities.
This project is licensed under the MIT License.
Initial release of CSS Tailwind Minifier.
Included:
- Basic CSS minification.
- Tailwind class cleanup.
- Command Palette integration.
- Lightweight VS Code extension structure.
Suggestions, bug reports, and feature requests are welcome.
If this extension helps you, consider rating it on the Visual Studio Code Marketplace.
Built to help developers write cleaner and more optimized code.