Write, Run & Share Tailwind CSS code online using OneCompiler's Tailwind CSS online editor for free. It's one of the robust, feature-rich online editors for Tailwind CSS. Getting started with the OneCompiler's Tailwind CSS editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Tailwind CSS' and start writing code to learn and test online without worrying about tedious process of installation.
Tailwind CSS is a utility-first CSS framework that provides low-level utility classes to build custom designs directly in your HTML. Unlike traditional CSS frameworks that provide pre-designed components, Tailwind gives you building blocks to create unique designs without writing custom CSS. It's highly customizable, responsive by default, and enables rapid UI development.
Tailwind provides utilities for controlling layout, display, and positioning. Use flex and grid utilities to create complex layouts with minimal effort. The container class centers your content and provides responsive padding.
<div class="container mx-auto px-4">
<div class="flex flex-col md:flex-row gap-4">
<div class="flex-1 bg-blue-100 p-4">Column 1</div>
<div class="flex-1 bg-blue-200 p-4">Column 2</div>
<div class="flex-1 bg-blue-300 p-4">Column 3</div>
</div>
</div>
Control padding and margin with intuitive spacing utilities. The number represents the spacing scale where 1 unit equals 0.25rem (4px). Use p for padding, m for margin, followed by direction (t, r, b, l, x, y) and size.
<!-- Padding -->
<div class="p-4">Padding on all sides</div>
<div class="px-4 py-2">Horizontal and vertical padding</div>
<div class="pt-2 pb-4">Top and bottom padding</div>
<!-- Margin -->
<div class="m-4">Margin on all sides</div>
<div class="mx-auto">Centered horizontally</div>
<div class="mt-4 mb-8">Top and bottom margin</div>
<!-- Negative margin -->
<div class="-mt-4">Negative top margin</div>
Style text with utilities for font size, weight, color, alignment, and more. Tailwind includes a comprehensive set of text utilities that cover most typography needs.
<!-- Font sizes -->
<p class="text-xs">Extra small text</p>
<p class="text-sm">Small text</p>
<p class="text-base">Base text</p>
<p class="text-lg">Large text</p>
<p class="text-xl">Extra large text</p>
<p class="text-2xl">2XL text</p>
<!-- Font weight -->
<p class="font-light">Light text</p>
<p class="font-normal">Normal text</p>
<p class="font-medium">Medium text</p>
<p class="font-semibold">Semibold text</p>
<p class="font-bold">Bold text</p>
<!-- Text alignment and color -->
<p class="text-center text-gray-600">Centered gray text</p>
<p class="text-right text-blue-500">Right-aligned blue text</p>
<!-- Line height and letter spacing -->
<p class="leading-loose tracking-wide">
Loose line height, wide letter spacing
</p>
Tailwind includes an extensive color palette with shades from 50 to 950. Apply colors to text, backgrounds, borders, and more. Each color has multiple shades for flexibility.
<!-- Background colors -->
<div class="bg-white">White background</div>
<div class="bg-gray-100">Light gray background</div>
<div class="bg-blue-500">Blue background</div>
<div class="bg-red-600">Red background</div>
<!-- Text colors -->
<p class="text-gray-900">Dark gray text</p>
<p class="text-blue-600">Blue text</p>
<p class="text-green-500">Green text</p>
<!-- Border colors -->
<div class="border border-gray-300">Gray border</div>
<div class="border-2 border-blue-500">Blue border</div>
<!-- Opacity -->
<div class="bg-black bg-opacity-50">50% opacity black</div>
<div class="bg-blue-500/75">75% opacity blue</div>
Create flexible layouts with Tailwind's flexbox utilities. Control direction, alignment, wrapping, and spacing of flex items with simple classes.
<!-- Basic flex container -->
<div class="flex">
<div>Item 1</div>
<div>Item 2</div>
</div>
<!-- Direction -->
<div class="flex flex-row">Horizontal (default)</div>
<div class="flex flex-col">Vertical</div>
<div class="flex flex-row-reverse">Reversed horizontal</div>
<!-- Justify content -->
<div class="flex justify-start">Start</div>
<div class="flex justify-center">Center</div>
<div class="flex justify-end">End</div>
<div class="flex justify-between">Space between</div>
<div class="flex justify-around">Space around</div>
<!-- Align items -->
<div class="flex items-start">Align start</div>
<div class="flex items-center">Align center</div>
<div class="flex items-end">Align end</div>
<div class="flex items-stretch">Stretch (default)</div>
<!-- Flex wrap -->
<div class="flex flex-wrap">Wrap items</div>
<div class="flex flex-nowrap">No wrap</div>
<!-- Gap -->
<div class="flex gap-4">Gap between items</div>
<div class="flex gap-x-4 gap-y-2">Different x and y gaps</div>
Build complex grid layouts with CSS Grid utilities. Define columns, rows, gaps, and how items span across the grid.
<!-- Basic grid -->
<div class="grid grid-cols-3 gap-4">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div>Responsive item</div>
</div>
<!-- Column span -->
<div class="grid grid-cols-4 gap-4">
<div class="col-span-2">Spans 2 columns</div>
<div class="col-span-1">Spans 1</div>
<div class="col-span-1">Spans 1</div>
</div>
<!-- Row span -->
<div class="grid grid-rows-3 grid-flow-col gap-4">
<div class="row-span-2">Spans 2 rows</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
Tailwind uses mobile-first responsive design. Prefix any utility with a breakpoint to apply it at that screen size and above. Default breakpoints are sm (640px), md (768px), lg (1024px), xl (1280px), and 2xl (1536px).
<!-- Responsive text size -->
<p class="text-sm md:text-base lg:text-lg xl:text-xl">Responsive text</p>
<!-- Responsive layout -->
<div class="flex flex-col md:flex-row">
<div class="w-full md:w-1/2">Half width on medium+</div>
<div class="w-full md:w-1/2">Half width on medium+</div>
</div>
<!-- Hide/show at breakpoints -->
<div class="hidden md:block">Visible on medium+</div>
<div class="block md:hidden">Visible on small only</div>
<!-- Responsive padding -->
<div class="p-2 sm:p-4 md:p-6 lg:p-8">Increasing padding</div>
Add borders, control their width, style, and color. Round corners with border-radius utilities from subtle to fully circular.
<!-- Border width -->
<div class="border">1px border</div>
<div class="border-2">2px border</div>
<div class="border-4">4px border</div>
<div class="border-t-2">Top border only</div>
<!-- Border radius -->
<div class="rounded">Small radius</div>
<div class="rounded-md">Medium radius</div>
<div class="rounded-lg">Large radius</div>
<div class="rounded-xl">Extra large radius</div>
<div class="rounded-full">Fully rounded</div>
<div class="rounded-t-lg">Top corners only</div>
<!-- Border style -->
<div class="border-solid">Solid border</div>
<div class="border-dashed">Dashed border</div>
<div class="border-dotted">Dotted border</div>
Add depth to elements with box shadow utilities. Tailwind provides a range of shadow sizes from subtle to dramatic.
<div class="shadow-sm">Small shadow</div>
<div class="shadow">Default shadow</div>
<div class="shadow-md">Medium shadow</div>
<div class="shadow-lg">Large shadow</div>
<div class="shadow-xl">Extra large shadow</div>
<div class="shadow-2xl">2XL shadow</div>
<div class="shadow-inner">Inner shadow</div>
<div class="shadow-none">No shadow</div>
Control element dimensions with width and height utilities. Use fixed sizes, percentages, viewport units, or content-based sizing.
<!-- Fixed width -->
<div class="w-4">1rem</div>
<div class="w-32">8rem</div>
<div class="w-64">16rem</div>
<!-- Percentage width -->
<div class="w-1/2">50%</div>
<div class="w-1/3">33.33%</div>
<div class="w-2/3">66.67%</div>
<div class="w-full">100%</div>
<!-- Viewport and special widths -->
<div class="w-screen">100vw</div>
<div class="w-min">Min content</div>
<div class="w-max">Max content</div>
<div class="w-fit">Fit content</div>
<!-- Height -->
<div class="h-16">4rem height</div>
<div class="h-full">100% height</div>
<div class="h-screen">100vh</div>
<div class="min-h-screen">Min 100vh</div>
Apply styles on hover, focus, active, and other states using state modifiers. These can be combined with any utility class.
<!-- Hover -->
<button class="bg-blue-500 hover:bg-blue-600 text-white">Hover me</button>
<!-- Focus -->
<input class="border focus:border-blue-500 focus:ring-2 focus:ring-blue-200" />
<!-- Active -->
<button class="bg-gray-200 active:bg-gray-300">Click me</button>
<!-- Group hover -->
<div class="group">
<div class="group-hover:text-blue-500">Changes when parent is hovered</div>
</div>
<!-- Disabled state -->
<button class="disabled:opacity-50 disabled:cursor-not-allowed" disabled>
Disabled
</button>
<!-- First/last child -->
<div class="first:pt-0 last:pb-0">Item</div>
Add smooth transitions and built-in animations to enhance user experience. Control duration, timing, and what properties to animate.
<!-- Basic transition -->
<button class="transition bg-blue-500 hover:bg-blue-600">
Smooth color change
</button>
<!-- Transition with duration -->
<div class="transition duration-300 ease-in-out hover:scale-105">
Scales on hover
</div>
<!-- Specific property transitions -->
<div class="transition-colors duration-200">Color transition</div>
<div class="transition-opacity duration-300">Opacity transition</div>
<div class="transition-transform duration-500">Transform transition</div>
<!-- Built-in animations -->
<div class="animate-spin">Spinning</div>
<div class="animate-ping">Pinging</div>
<div class="animate-pulse">Pulsing</div>
<div class="animate-bounce">Bouncing</div>
Scale, rotate, translate, and skew elements with transform utilities. Combine multiple transforms for complex effects.
<!-- Scale -->
<div class="scale-75">75% size</div>
<div class="scale-100">100% size</div>
<div class="scale-150">150% size</div>
<div class="hover:scale-105">Scale on hover</div>
<!-- Rotate -->
<div class="rotate-45">45 degrees</div>
<div class="rotate-90">90 degrees</div>
<div class="-rotate-45">-45 degrees</div>
<!-- Translate -->
<div class="translate-x-4">Move right</div>
<div class="translate-y-2">Move down</div>
<div class="-translate-x-4">Move left</div>
<!-- Skew -->
<div class="skew-x-12">Skew horizontal</div>
<div class="skew-y-6">Skew vertical</div>
<!-- Transform origin -->
<div class="origin-center rotate-45">Rotate from center</div>
<div class="origin-top-left rotate-45">Rotate from top-left</div>
Tailwind supports dark mode out of the box. Prefix utilities with dark: to apply styles when dark mode is active.
<div class="bg-white dark:bg-gray-800">
<p class="text-gray-900 dark:text-white">Adapts to dark mode</p>
<button class="bg-blue-500 dark:bg-blue-600 text-white">Button</button>
</div>
<div class="max-w-sm rounded-lg overflow-hidden shadow-lg bg-white">
<img class="w-full" src="image.jpg" alt="Card image" />
<div class="px-6 py-4">
<h2 class="font-bold text-xl mb-2">Card Title</h2>
<p class="text-gray-700 text-base">Card description goes here.</p>
</div>
</div>
<button
class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-200"
>
Primary Button
</button>
<button
class="border-2 border-blue-500 text-blue-500 hover:bg-blue-500 hover:text-white font-semibold py-2 px-4 rounded-lg transition duration-200"
>
Outline Button
</button>
<input
type="text"
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="Enter text..."
/>
<div
class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg"
role="alert"
>
<strong class="font-bold">Success!</strong>
<span class="block sm:inline">Your changes have been saved.</span>
</div>
<nav class="bg-gray-800 p-4">
<div class="container mx-auto flex justify-between items-center">
<a href="#" class="text-white text-xl font-bold">Logo</a>
<div class="space-x-4">
<a href="#" class="text-gray-300 hover:text-white">Home</a>
<a href="#" class="text-gray-300 hover:text-white">About</a>
<a href="#" class="text-gray-300 hover:text-white">Contact</a>
</div>
</div>
</nav>
