Kelas Tailwind ke CSS
Konversikan daftar kelas utilitas Tailwind CSS menjadi aturan CSS biasa yang setara. Mendukung tata letak, spasi, pengukuran, warna, tipografi, perbatasan, bayangan, transformasi, dan varian keadaan/responsif (hover, md, dark, dll.).
Input
Pemilih yang digunakan untuk aturan yang dihasilkan. Defaultnya adalah .element.
Output
Cara lain menggunakan alat ini
REST API
curl -X POST https://api.iotools.cloud/v1/tool/tailwind-classes-to-css \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"tailwindInput": "flex items-center justify-between p-4 text-lg fo…",
"selector": ".element"
}'Ganti dengan kunci Anda sendiri dari akun Anda. Bidang alat menjadi isi permintaan — tanpa pembungkus.
Tanyakan ke agen AI
Use the IOTools `tailwind-classes-to-css` tool (Tailwind Classes to CSS) on this input:
YOUR_INPUT_HERETempelkan ini ke agen mana pun yang terhubung ke server MCP IOTools, lalu tambahkan input Anda.
Widget sematan
<iframe
src="https://iotools.cloud/embed/tailwind-classes-to-css/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Kelas Tailwind ke CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Tempelkan ini di halaman Anda sendiri — gratis, tanpa kunci, cukup tautan balik.
| Biaya per panggilan API/MCP | Mulai dari 5 kredit |
|---|---|
| Butuh kredit lebih? | Lihat harga |
Juga tersedia melalui
Panduan
Paste a list of Tailwind CSS utility classes and instantly get the equivalent plain CSS. This tool is handy when you need to move a component out of a Tailwind project, understand what a cluster of utilities actually does, debug specificity, or hand a designer or a non-Tailwind codebase real CSS rules instead of class names.
How to use it
- Paste your space-separated Tailwind classes into the input box, for example
flex items-center justify-between p-4 text-lg font-bold text-blue-500. - Optionally set the CSS Selector used for the generated rule (defaults to
.element). - The equivalent CSS appears on the right, ready to copy or download.
Classes are grouped by variant: base utilities land in one rule, hover: / focus: utilities get their own pseudo-class rule, and responsive prefixes like md: are wrapped in the matching @media query.
What it converts
The converter uses a curated map of the most common Tailwind v3 utilities rather than a full compiler, so coverage is broad but finite. Supported categories include:
- Layout & display —
flex,grid,block,hidden,inline-*,table-*,flow-root - Position & inset —
relative,absolute,fixed,sticky,top-*,inset-*,z-* - Flexbox & grid — direction, wrap,
grow/shrink,items-*,justify-*,content-*,self-*,place-*,grid-cols-*,col-span-*,gap-* - Spacing — margin and padding (
m,mx,pt, …) including negative values, on the full spacing scale - Sizing —
w-*,h-*,min-*,max-w-*,size-*, fractions,full,screen - Typography —
text-{size},font-{weight},text-{color},leading-*,tracking-*, alignment, decoration, transform,truncate - Backgrounds & borders —
bg-{color}, gradients,border-*widths/colors/styles,rounded-* - Effects —
shadow-*,opacity-* - Transforms & transitions —
translate-*,rotate-*,scale-*,skew-*,transition,duration-*,delay-*,ease-* - Colors — the complete Tailwind v3 palette (
slatethroughrose, all shades 50–950) plusblack,white,transparent,current - Arbitrary values — bracketed utilities such as
w-[42px]orbg-[#123456]for a mapped set of prefixes
Variants
State variants (hover, focus, active, disabled, first, last, odd/even, …), pseudo-elements (before, after, placeholder, …), attribute variants (rtl, ltr), group-* / peer-*, and responsive/media variants (sm–2xl, max-*, dark, print, motion-*, contrast-*, orientation) are all recognized and expanded into the appropriate selector or @media block.
Scope & limits
This is a faithful lookup table, not the Tailwind engine. It does not read your tailwind.config.js, so custom theme values, plugins, and JIT-only features are out of scope. Complex effects that Tailwind implements with CSS variables (ring, filters, multi-stop gradients) map to the utility's static form. Any class it does not recognize is reported as a /* No equivalent for "..." */ comment in the output rather than dropped silently, so you always know what was skipped.
Privacy
The conversion runs entirely in your browser. Your class list is never uploaded to a server.