CSS Tailwind Minifier

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.