Because life's too short to manually convert CSS properties one by one
Ever found yourself staring at a massive CSS file, wondering how many justify-content: center declarations you'd need to convert to justify-center? Well, wonder no more! This delightful little tool takes your regular CSS and magically transforms it into Tailwind utility classes faster than you can say "utility-first framework."
Unlike those lazy converters that just give up and throw generic fallbacks at everything, our tool actually understands your CSS with smart pattern matching and delivers proper Tailwind classes. It's like having a personal CSS-to-Tailwind translator that works 24/7, doesn't drink your coffee, and never judges you for using !important (though we still will, silently).
- 🧠 Intelligent Pattern Matching: Advanced algorithms that understand CSS patterns and relationships
- 🎯 Smart CSS Parsing: Understands your CSS better than your browser's dev tools
- 🔄 Real-time Conversion: See results as you type (it's basically magic)
- 📱 Mobile Responsive: Because someone might actually use this on their phone (we don't judge)
- 📋 One-Click Copying: Copy individual classes or grab them all at once
⚠️ Honest Feedback: Tells you when something can't be converted (with actual reasons!)- 🎨 Beautiful Dark Theme: Easy on the eyes during those late-night coding sessions
- 🔍 Dynamic Value Detection: Automatically handles custom values, calculations, and complex patterns
- 🚀 Best Practices Built-in: No lazy fallbacks or "close enough" conversions here
-
Clone this bad boy:
git clone https://github.com/yourusername/css-tailwind-converter.git cd css-tailwind-converter -
Install the dependencies (the usual suspects):
npm install
-
Fire it up:
npm run dev
-
Open your browser to
http://localhost:5173and start converting!
- Paste your CSS in the left panel
- Watch the magic happen in the right panel - our pattern matching engine analyzes your styles in real-time
- Copy the precisely converted Tailwind classes you need
- Profit! 💰
While other tools might convert padding: 12px 16px to some generic fallback, we actually understand the pattern and give you proper Tailwind spacing classes. Our dynamic pattern matching handles:
- Complex Value Calculations:
calc(),vh/vwunits, percentages - Multi-value Properties: Margins, paddings, borders with different values per side
- Advanced Selectors: Pseudo-classes, combinators, and more
- Dynamic Units: rem, em, px, %, vh, vw - we convert them all intelligently
- Color Variations: Hex, RGB, HSL, named colors, and opacity variations
No more lazy [style] attributes or "this property isn't supported" cop-outs!
Our pattern matching engine handles way more than basic conversions:
- Display properties (flex, grid, block, inline, etc.)
- Positioning (absolute, relative, sticky, fixed, etc.)
- Z-index with intelligent layering
- Overflow behaviors
- All flexbox properties with proper direction handling
- Complex grid layouts with intelligent track sizing
- Gap properties with multi-value support
- Alignment properties that actually make sense
- Margin and padding with per-side intelligence
- Complex spacing patterns and calculations
- Negative values handled properly
- Custom spacing values converted to arbitrary classes
- Min/max dimensions with proper constraints
- Aspect ratios and responsive sizing
- Container sizing with proper boundaries
- Dynamic viewport units
- Size Optimization: When width and height have the same value, it uses size-* instead of separate w-* and h-* classes
- Comprehensive Size Mapping: Covers pixels, rems, percentages, viewport units, and fractional sizes
- Viewport Context Awareness: Handles vw and vh units appropriately for width vs height
- Value Normalization: Compares sizes intelligently (e.g., 100px vs 100)
- Arbitrary Value Support: Falls back to [arbitrary-value] syntax for complex expressions
- Font families with proper fallback handling
- Font weights, sizes, and line heights
- Text alignment, decoration, and transformation
- Letter spacing and word spacing
- Text overflow and whitespace handling
- All color formats (hex, rgb, hsl, named colors)
- Background colors, gradients, and images
- Border colors with opacity support
- Text colors with proper contrast considerations
- Box shadows with multiple value support
- Opacity and blend modes
- Transform functions (rotate, scale, translate)
- Transition and animation properties
- Border radius with complex patterns
- Backdrop filters and effects
- CSS custom properties (where convertible)
- Complex keyframe animations (coming this summer!)
- Advanced pseudo-selectors (
:nth-childpatterns, etc.) - Complex CSS Grid template areas
- Advanced clipping paths
- Multi-layer box shadows (partial support)
- Your patience when we occasionally overthink a conversion 😅
We love contributions more than we love perfectly aligned divs! Here's how you can help make this tool even more awesome:
- Open an issue and tell us what broke
- Include the CSS that caused trouble
- Bonus points for including steps to reproduce it
- Extra bonus points if you include a funny GIF
- Feature requests for new pattern matching capabilities
- Suggestions for better conversion logic
- The weirder, the better (within reason)
- We promise to consider even the most outlandish suggestions
- Fork the repo
- Create a feature branch (
git checkout -b feature/amazing-pattern-matching) - Make your changes (bonus points for improving our conversion algorithms)
- Write tests (your future self will thank you)
- Submit a pull request with a clear description
- Help us document new pattern matching features
- Clarify conversion logic explanations
- Add examples of complex CSS conversions
- Make our README even funnier (challenge accepted?)
- UI/UX improvements for better conversion workflow
- Better visualization of conversion results
- Accessibility enhancements
- Mobile experience improvements
- Pattern matching improvements (make our conversions even smarter)
- New CSS property support (expand our conversion capabilities)
- Bug reports (the more detailed, the better)
- Performance optimizations (make our algorithms faster)
- Test coverage (especially for edge cases)
- Documentation (help others understand our conversion logic)
- Accessibility improvements (make it usable for everyone)
- Design feedback (make the interface more intuitive)
- Memes about CSS (okay, maybe not in the codebase, but we appreciate them)
- React 18 - Because hooks are life
- TypeScript - For when you want to catch bugs before they catch you
- Tailwind CSS - Eating our own dog food
- Vite - Fast builds, happy developers
- Lucide React - Pretty icons that don't slow things down
- Custom Pattern Matching Engine - The secret sauce that makes this all work
MIT License - Feel free to use this in your projects, commercial or otherwise. Just don't blame us if our pattern matching is so good it makes your other tools jealous.
Having trouble? Found a CSS pattern we should handle better? Just want to chat about utility-first CSS?
- Open an issue on GitHub
- Start a discussion about conversion strategies
- Send us your trickiest CSS to test our pattern matching
- Send us a carrier pigeon (results may vary)
Remember, this tool is like a really smart friend - it actually understands what you're trying to do and gives you proper solutions, not lazy workarounds. Our pattern matching engine is constantly learning and improving, so if you find CSS it can't handle perfectly, let us know and we'll teach it new tricks!
Unlike those other converters that give up at the first sign of complexity, we embrace the challenge. Got a gnarly CSS grid? Bring it on. Complex flexbox layout? We've got you covered. Multi-value border radius that would make other tools cry? That's our Tuesday morning warmup.
Happy converting! May your CSS be semantic, your Tailwind classes be utility-first, and your pattern matching be flawless! 🎉
Built with ❤️, advanced algorithms, and probably too much caffeine