Bringing the modern utility-first CSS revolution to the darkest ages of the web: Internet Explorer 6.
Because your enterprise legacy system built in 2003 deserves to look like it was built in 2026.
This engine parses standard Tailwind CSS classes natively in JScript 5.x and maps them directly to IE6-compatible CSS properties, VML (Vector Markup Language), and DirectX Filters.
- Arbitrary Values Support: Write classes like
w-[250px],bg-[#ff0099],text-[13px],rounded-[10px]! - Full Color Palette: Comprehensive mapping of Tailwind colors.
- Spacing & Sizing: Margins, padding, dimensions, and percentage/fractional widths (
w-1/2,w-full). - Responsive Breakpoints:
sm:,md:,lg:,xl:,2xl:handled dynamically via JS window resizing. - Pseudo-classes:
hover:,focus:,active:, and evengroup-hover:! - DirectX Filters (Polyfills):
opacity-50(usesalpha(opacity))shadow-lg(usesDXImageTransform.Microsoft.Shadow)blur-md(usesDXImageTransform.Microsoft.Blur)bg-gradient-to-r from-red-500 to-blue-500(usesMicrosoft.gradient)rotate-45,scale-150(usesMicrosoft.Matrixvia math trigonometrics)
- True Rounded Corners:
rounded-lg,rounded-fullachieved dynamically injecting IE VML (<v:roundrect>). - Fake Flex/Grid:
grid-cols-3automatically calculates percentage widths and appliesfloat: left.divide-yandspace-x-4handled via intelligent DOM traversal.
- Drop the script into the
<head>or bottom of the<body>of your vintage HTML file.
<!-- Yes, we are writing HTML 4.01 or XHTML 1.0 Strict here -->
<script type="text/javascript" src="tailwind-ie6.js"></script>- Start writing Tailwind as usual:
<div class="max-w-[800px] mx-auto mt-10 p-6 bg-white rounded-xl shadow-lg border border-gray-200">
<h1 class="text-3xl font-bold text-gray-900 mb-4 tracking-tight">Hello IE6!</h1>
<div class="grid grid-cols-2 space-x-4">
<div class="bg-blue-500 hover:bg-blue-600 text-white p-4 rounded-md cursor-pointer transition-none">
Hover me!
</div>
<div class="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-[20px] opacity-80">
Gradients & Arbitrary Radius
</div>
</div>
<!-- Group Hover Example -->
<div class="group mt-8 p-4 border border-dashed border-gray-400 bg-gray-50">
<p class="text-gray-500 group-hover:text-[#ff0000] group-hover:font-bold">
I turn red and bold when you hover my parent container!
</p>
</div>
</div>IE6 doesn't support CSS3. It doesn't know what border-radius or box-shadow is.
This script reads the className of all elements, parses the Tailwind logic, and directly modifies the element's style object.
- For layout bugs, it aggressively applies
zoom: 1to trigger IE's internalhasLayoutmechanism. - For rounded corners, it creates absolute-positioned Vector Graphic nodes behind your elements.
- Performance: Running complex DOM traversal and DX filters on IE6 JScript engine is inherently slow. Don't use this on a page with 10,000 DOM nodes unless you want to hear your Pentium 4 CPU fan scream.
- Flexbox/Grid: Real Flexbox is mathematically impossible to perfectly polyfill.
flexfalls back toblock, andgrid-cols-*uses percentage floats. - Animations:
transitionandanimate-*are ignored. Changes happen instantly.