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.
What is CSS Tailwind Minifier?
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.
Features
- 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.
Why use this extension?
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.
Comparison
| 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 |
Example
Before
<div class="
bg-blue-500
text-white
px-4
py-2
rounded-lg
shadow-md
hover:bg-blue-600
">
Button
</div>
After
<div class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600">
Button
</div>
CSS Example
Before
.button {
background-color: #2563eb;
color: white;
padding: 10px 16px;
border-radius: 8px;
}
After
.button{background-color:#2563eb;color:white;padding:10px 16px;border-radius:8px;}
Usage
- 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.
Supported File Types
This extension can be useful in files such as:
.html.css.scss.ts.tsx.jsx.vue.blade.php.php.js
Requirements
No additional configuration is required.
Just install the extension and start using it from the Command Palette.
Extension Settings
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.
Known Issues
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.
Roadmap
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.
About Angelito Systems S.A.C.
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.
Author
Created by Angel Calderón Mantilla.
Published under Angelito Systems S.A.C.
Publisher
Angelito Systems S.A.C.
Developer tools, software solutions, web systems, mobile apps, and productivity utilities.
License
This project is licensed under the MIT License.
Release Notes
0.0.1
Initial release of CSS Tailwind Minifier.
Included:
- Basic CSS minification.
- Tailwind class cleanup.
- Command Palette integration.
- Lightweight VS Code extension structure.
Feedback
Suggestions, bug reports, and feature requests are welcome.
If this extension helps you, consider rating it on the Visual Studio Code Marketplace.
Made with passion by Angelito Systems S.A.C.
Built to help developers write cleaner and more optimized code.