Help & Documentation

Everything you need to know about using Tailwindup, the universal style converter for CSS, Tailwind CSS, and SCSS.

Quick Navigation

Jump to a specific section

Getting Started Conversion Features Using the Editor Conversion Accuracy Custom Configurations Batch Conversion Conversion History Troubleshooting FAQ

Getting Started

What is Tailwindup?

Tailwindup is a universal style converter that enables seamless conversion between CSS, Tailwind CSS, and SCSS formats. Convert your styles in real-time with high accuracy.

Key Features:

Bidirectional conversion between multiple formats
Real-time conversion with instant results
80%+ conversion accuracy
Custom configuration support
Batch file conversion
Conversion history tracking

Quick Start Guide

Get converting in 5 simple steps

1Go to the editor - Click "Editor" in the navigation or visit the home page
2Paste your code - Enter CSS, Tailwind classes, or SCSS in the left editor
3Auto-detection - Format is detected automatically (or select manually)
4Choose target format - Select output format from dropdown
5Get results instantly - Converted code appears in the right editor

Example: CSS to Tailwind

Input (CSS):

.button {
  padding: 1rem 2rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.5rem;
  font-weight: 600;
}

Output (Tailwind):

px-8 py-4 bg-blue-500 text-white rounded-lg font-semibold

Conversion Features

Supported Conversions

All supported format pairs with quality ratings

From → To	Support	Quality
CSS → Tailwind	Full	85%+
CSS → SCSS	Full	95%+
Tailwind → CSS	Full	90%+
Tailwind → SCSS	Full	90%+
SCSS → CSS	Full	95%+
SCSS → Tailwind	Full	80%+

Format Auto-Detection

How Tailwindup identifies your input format

CSS Detection:

Contains braces { }
Has CSS properties
Uses selectors (.class, #id, element)

Tailwind Detection:

Space-separated utility classes
No braces or selectors
Uses Tailwind utility names (flex, p-4, bg-blue-500)

SCSS Detection:

Contains $ variables
Uses @mixin, @include, @extend directives
Has SCSS-specific syntax

Using the Editor

Editor Interface

Understanding the editor layout and features

Input Editor (Left):

Syntax highlighting for CSS, Tailwind, and SCSS
Auto-format on paste
Format auto-detection
Line numbers and auto-completion

Output Editor (Right):

Syntax highlighting
One-click copy button
Download as file
Real-time updates as you type

Action Buttons:

Copy - Copy converted code to clipboard
Save - Save conversion to history (requires account)
Download - Save as file
Clear - Clear both editors
Swap - Swap input/output and reverse conversion

Keyboard Shortcuts

Speed up your workflow

Editor Shortcuts:

Cmd/Ctrl + Enter - Convert
Cmd/Ctrl + S - Save to history
Cmd/Ctrl + K - Clear all
Cmd/Ctrl + D - Download

Navigation Shortcuts:

Cmd/Ctrl + 1 - Go to Editor
Cmd/Ctrl + 2 - Go to History
Cmd/Ctrl + 3 - Go to Configs
Cmd/Ctrl + , - Open Settings

Conversion Accuracy

What to Expect

Understanding conversion quality and limitations

Tailwindup aims for 80%+ conversion accuracy across all format pairs. Most conversions are highly accurate, but some edge cases may require manual review.

Confidence Scores:

90-100% - High confidence, safe to use as-is
70-89% - Good conversion, quick review suggested
50-69% - Partial conversion, manual review needed
Below 50% - Low confidence, significant manual work required

Known Limitations

Complex Properties:

Gradients may use arbitrary values or bg-gradient-to-* utilities
Complex box-shadows might need manual adjustment
Transform functions may require review
Complex calc() expressions may be simplified

Non-Standard Values:

Custom values convert to arbitrary syntax: text-[14.5px]
Consider adding common values to your custom config

Vendor Prefixes:

Autoprefixer properties may need manual cleanup
Remove -webkit-, -moz- prefixes if not needed

Best Practices

Writing convertible CSS

✅ Good CSS for Conversion:

.button {
  padding: 1rem 2rem;
  background-color: #3b82f6;
  color: white;
  border-radius: 0.5rem;
}

❌ Difficult CSS:

.button {
  padding: calc(1rem + 2vw);
  background: linear-gradient(45deg, red, blue);
  box-shadow: 0 0 0 100px rgba(0,0,0,.1);
}

Tips:

Use standard Tailwind spacing/color values when possible
Avoid overly complex calc() expressions
Use simple selectors (avoid complex combinators)
Stick to well-supported CSS properties
Use consistent units (rem/px)

Custom Configurations

Why Use Custom Configs?

Custom configurations ensure conversions match your project's exact setup:

Custom colors - bg-brand instead of bg-[#hex]
Custom spacing - Match your project's scale
Custom fonts - Convert to your font classes
SCSS variables - Convert to your variable names
Mixins - Recognize your custom mixins

Uploading Tailwind Config

PRO

Supported Files:

tailwind.config.js
tailwind.config.ts
tailwind.config.cjs
tailwind.config.mjs

Steps:

Navigate to Configs page
Click "New Config" → "Tailwind"
Select your config file
Give it a name (e.g., "Project X Theme")
Click "Upload"
Set as default (optional)

Config Limits by Plan

Plan	Custom Configs	Max Size/Config
Free	Not available	—
Pro	Up to 20	100 KB
Team	Up to 20	100 KB

Note: Custom configurations are a Pro+ feature (not available on Free tier).

Both Tailwind and Sass configs count toward the same limit per plan.

Batch Conversion PRO+

Convert Multiple Files at Once

Perfect for migrating entire projects

The batch converter allows you to convert multiple files simultaneously, saving time when migrating entire projects or component libraries.

Steps:

Navigate to Batch Convert page
Choose formats (From → To)
Upload files (drag and drop or click to browse)
(Optional) Select custom config
Click "Convert All"
Download individual files or as ZIP

Batch Limits by Plan

Plan	Max Files	Max Size/File	Max Total Size
Free	Not available	—	—
Pro	100	1 MB	10 MB
Team	100	1 MB	10 MB

Note: Batch conversion is a Pro+ feature (not available on Free tier). Pro and Team tiers have identical batch conversion limits.

Conversion History

Saving Conversions

Keep track of your work

Manual Save:

Complete a conversion in the editor
Click the "Save" button
Conversion is saved to your history

Note: Conversion history is a PRO+ feature. Free plan users cannot save conversions to history. There is no automatic save feature - you must manually click the "Save" button to preserve your work.

Managing History

Search & Filter:

Search by input or output code
Filter by format pair (CSS→Tailwind, etc.)
Filter by date range

Favorites:

Click star icon to favorite important conversions
Filter to show only favorites
Quick access to common conversions

History Features by Plan

Plan	History Access	Manual Save	Search & Filter
Free	Not available	—	—
Pro	✅ Yes	✅ Yes	✅ Yes
Team	✅ Yes	✅ Yes	✅ Yes

Note: Conversion history is a Pro+ feature (not available on Free tier).

History and favorites are unlimited for Pro+ plans with no automatic retention limits. Conversions persist until manually deleted.

Troubleshooting

Common Issues

Conversion Returns Empty Result:

Check that input format is correctly detected
Manually select format if auto-detection fails
Verify input code has valid syntax
Remove comments or special characters

Parse Error Messages:

Fix missing closing braces or semicolons
Validate CSS with a linter
Check for invalid variable names in SCSS
Ensure arbitrary values are complete in Tailwind

Unexpected Output:

Review confidence score in warnings
Upload custom Tailwind/Sass config for better accuracy
Check known limitations section above
Report accuracy issues on GitHub

Getting Help

If you're still experiencing issues, we're here to help:

Email Support: support@windup.tools (Pro/Team plans)
Documentation: Check the docs folder for detailed guides

Frequently Asked Questions

Is my code stored or logged?

Only if you explicitly save to history. Anonymous conversions are processed in memory and deleted immediately. We never log or analyze your code otherwise.

Why doesn't my CSS convert perfectly?

Tailwind CSS has specific design decisions and constraints. Complex CSS may not have direct Tailwind equivalents. We aim for 80%+ accuracy, but some manual review may be needed for complex styles.

Can I convert back and forth without losing information?

Most conversions are reversible, but some loss is expected:

Custom values → Arbitrary values → Standard values
Complex selectors → Utility classes (loses hierarchy)
Pseudo-selectors may need manual grouping

Can I cancel my subscription anytime?

Yes, you can cancel anytime from your settings page. You'll retain access until the end of your billing period, then automatically downgrade to the free plan.

Do you offer a free trial?

The free plan is the trial! Start using Tailwindup immediately with 50 conversions per day. Upgrade to Pro or Team when you need more.

What happens to my data if I downgrade?

Your conversion history is preserved. However, custom configurations will no longer be accessible (custom configs are a Pro+ feature). You'll be limited to 50 conversions per day on the Free tier.