{"id":212,"date":"2026-10-18T15:04:34","date_gmt":"2026-10-18T15:04:34","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=212"},"modified":"2026-10-18T15:04:35","modified_gmt":"2026-10-18T15:04:35","slug":"tailwind-css-v4-tutorial","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/","title":{"rendered":"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3"},"content":{"rendered":"\n<div class=\"dd-post\">\n<style>\n.single article:has(.dd-hero) .entry-media{display:none}\n.dd-post{--navy:#0b1020;--blue:#3178c6;--violet:#7c5cff;--ink:#1f2433;--muted:#5b6275;--line:#e3e6ef;font-size:17px;line-height:1.75;color:var(--ink)}\n.dd-post h2{margin:2.2em 0 .6em;font-size:1.6em;line-height:1.3;scroll-margin-top:90px}\n.dd-post h3{margin:1.6em 0 .5em;font-size:1.22em;scroll-margin-top:90px}\n.dd-post a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}\n.dd-post pre{background:#0f1430;color:#e6e9f5;padding:18px 20px;border-radius:12px;overflow-x:auto;line-height:1.6;border:1px solid #232a52;margin:1.2em 0;font-size:14.5px !important}\n.dd-post pre code{font-size:1em !important;background:none;color:inherit;padding:0;font-family:\"JetBrains Mono\",\"Fira Code\",Consolas,Menlo,monospace;white-space:pre}\n.dd-post pre .c{color:#7f89b5}\n.dd-post pre .k{color:#c3a6ff}\n.dd-post pre .s{color:#9be7b0}\n.dd-post :not(pre)>code{background:#eef1fb;color:#2b3a8f;padding:2px 6px;border-radius:5px;font-size:.9em}\n.dd-post .dd-file{display:inline-block;background:#151b3b;color:#c9d1ff;font:600 13px\/1 \"JetBrains Mono\",Consolas,monospace;padding:7px 12px;border-radius:8px 8px 0 0;margin:1em 0 -1.2em;position:relative}\n.dd-post .dd-hero{margin:0 0 1.6em;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,16,32,.25)}\n.dd-post .dd-hero svg{display:block;width:100%;height:auto}\n.dd-post .dd-hero .node{transition:transform .25s,filter .25s;transform-box:fill-box;transform-origin:center;cursor:pointer}\n.dd-post .dd-hero .node:hover{transform:scale(1.08);filter:drop-shadow(0 0 10px #7c5cff)}\n.dd-post .dd-summary{background:linear-gradient(135deg,#eef3ff,#f4efff);border:1px solid #d6dcf5;border-left:5px solid var(--violet);border-radius:12px;padding:18px 22px;margin:1.4em 0}\n.dd-post .dd-summary strong.lbl{display:block;font-size:1.05em;margin-bottom:6px;color:#3a2fa0}\n.dd-post .dd-summary ul{margin:.3em 0 0 1.1em}\n.dd-post .dd-toc{background:#f8f9fc;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin:1.4em 0}\n.dd-post .dd-toc ol{margin:.4em 0 0 1.2em;columns:2;column-gap:28px}\n.dd-post .dd-toc li{break-inside:avoid;margin:.15em 0}\n@media(max-width:640px){.dd-post .dd-toc ol{columns:1}}\n.dd-post .dd-tip,.dd-post .dd-note,.dd-post .dd-warn{border-radius:10px;padding:14px 18px;margin:1.3em 0}\n.dd-post .dd-tip{background:#ecfbf3;border-left:4px solid #1f9d61}\n.dd-post .dd-note{background:#eef4ff;border-left:4px solid var(--blue)}\n.dd-post .dd-warn{background:#fff6e8;border-left:4px solid #e08a00}\n.dd-post .dd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.3em 0}\n.dd-post .dd-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:0 2px 8px rgba(20,30,70,.05)}\n.dd-post .dd-card b{display:block;color:#3a2fa0;margin-bottom:4px}\n.dd-post table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}\n.dd-post th,.dd-post td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}\n.dd-post th{background:#151b3b;color:#fff}\n.dd-post tr:nth-child(even) td{background:#f8f9fc}\n.dd-post .dd-tablewrap{overflow-x:auto}\n.dd-post figure{margin:1.6em 0;text-align:center}\n.dd-post figure svg{width:100%;height:auto;border-radius:12px}\n.dd-post figcaption{font-size:.9em;color:var(--muted);margin-top:8px}\n.dd-post details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:.7em 0;background:#fff}\n.dd-post details summary{cursor:pointer;font-weight:600}\n.dd-post details[open] summary{margin-bottom:8px;color:#3a2fa0}\n.dd-post .dd-tabs{border:1px solid var(--line);border-radius:12px;padding:6px 16px 16px;margin:1.4em 0;background:#fbfbfe}\n.dd-post .dd-tabs>input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-tabs .labels label{display:inline-block;padding:8px 16px;margin:10px 6px 0 0;border-radius:999px;border:1px solid #cfd5ea;cursor:pointer;font-weight:600;font-size:.95em;background:#fff;transition:background .2s}\n.dd-post .dd-tabs .labels label:hover{border-color:var(--violet)}\n.dd-post .dd-tabs .panel{display:none;margin-top:12px}\n.dd-post .dd-tabs #ti1:checked~.labels label[for=ti1],.dd-post .dd-tabs #ti2:checked~.labels label[for=ti2],.dd-post .dd-tabs #ti3:checked~.labels label[for=ti3],.dd-post .dd-tabs #ti4:checked~.labels label[for=ti4]{background:var(--violet);color:#fff;border-color:var(--violet)}\n.dd-post .dd-tabs #ti1:checked~.p1,.dd-post .dd-tabs #ti2:checked~.p2,.dd-post .dd-tabs #ti3:checked~.p3,.dd-post .dd-tabs #ti4:checked~.p4{display:block}\n.dd-post .dd-tabs #ti1:focus-visible~.labels label[for=ti1],.dd-post .dd-tabs #ti2:focus-visible~.labels label[for=ti2],.dd-post .dd-tabs #ti3:focus-visible~.labels label[for=ti3],.dd-post .dd-tabs #ti4:focus-visible~.labels label[for=ti4]{outline:2px solid var(--blue);outline-offset:2px}\n.dd-post .dd-cta{background:linear-gradient(135deg,#0b1020,#151b3b);color:#e8ebff;border-radius:16px;padding:24px 26px;margin:2em 0;text-align:center}\n.dd-post .dd-cta h3{color:#fff;margin-top:0}\n.dd-post .dd-cta a{color:#a99bff}\n<\/style>\n<div class=\"dd-hero\"><svg viewBox=\"0 0 1200 520\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"ddh-t ddh-d\">\n<title id=\"ddh-t\">Tailwind CSS v4 Tutorial<\/title>\n<desc id=\"ddh-d\">Animated banner: a CSS file with @import &#8220;tailwindcss&#8221; and an @theme block flows into the Tailwind engine, which produces small, fast CSS for your user interface.<\/desc>\n<defs>\n<linearGradient id=\"ddh-bg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0b1020\"\/><stop offset=\"1\" stop-color=\"#151b3b\"\/><\/linearGradient>\n<linearGradient id=\"ddh-ac\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#3178c6\"\/><stop offset=\"1\" stop-color=\"#7c5cff\"\/><\/linearGradient>\n<radialGradient id=\"ddh-glow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#7c5cff\" stop-opacity=\".35\"\/><stop offset=\"1\" stop-color=\"#7c5cff\" stop-opacity=\"0\"\/><\/radialGradient>\n<\/defs>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddh-bg)\"\/>\n<circle cx=\"900\" cy=\"270\" r=\"270\" fill=\"url(#ddh-glow)\"\/>\n<circle cx=\"120\" cy=\"480\" r=\"170\" fill=\"url(#ddh-glow)\"\/>\n<g fill=\"#7c5cff\" opacity=\".25\"><circle cx=\"80\" cy=\"60\" r=\"2\"\/><circle cx=\"300\" cy=\"40\" r=\"2\"\/><circle cx=\"560\" cy=\"30\" r=\"2\"\/><circle cx=\"1150\" cy=\"40\" r=\"2\"\/><circle cx=\"1140\" cy=\"480\" r=\"2\"\/><circle cx=\"480\" cy=\"500\" r=\"2\"\/><\/g>\n<text x=\"60\" y=\"120\" fill=\"#ffffff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"56\" font-weight=\"800\">Tailwind CSS v4<\/text>\n<text x=\"60\" y=\"184\" fill=\"#ffffff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"56\" font-weight=\"800\">Tutorial<\/text>\n<rect x=\"60\" y=\"210\" width=\"220\" height=\"5\" rx=\"2.5\" fill=\"url(#ddh-ac)\"\/>\n<text x=\"60\" y=\"258\" fill=\"#c9d1ff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"26\" font-weight=\"600\">Setup, @theme, dark mode<\/text>\n<text x=\"60\" y=\"294\" fill=\"#c9d1ff\" font-family=\"Segoe UI,Roboto,Arial,sans-serif\" font-size=\"26\" font-weight=\"600\">and upgrading from v3<\/text>\n<g font-family=\"JetBrains Mono,Consolas,monospace\" font-size=\"17\" fill=\"#8f99c9\">\n<text x=\"60\" y=\"370\"><tspan fill=\"#a99bff\">@import<\/tspan> &#8220;tailwindcss&#8221;;<\/text>\n<text x=\"60\" y=\"400\"><tspan fill=\"#a99bff\">@theme<\/tspan> {<\/text>\n<text x=\"60\" y=\"430\">  &#8211;color-brand: <tspan fill=\"#7fb6ff\">oklch(0.6 0.2 270)<\/tspan>;<\/text>\n<text x=\"60\" y=\"460\">}<\/text>\n<\/g>\n<g fill=\"none\" stroke=\"#3a4486\" stroke-width=\"2.5\" stroke-dasharray=\"7 7\">\n<path id=\"ddh-p1\" d=\"M780 170 C 830 170, 830 270, 860 270\"\/>\n<path id=\"ddh-p2\" d=\"M780 380 C 830 380, 830 270, 860 270\"\/>\n<path id=\"ddh-p3\" d=\"M1000 270 L1050 270\"\/>\n<\/g>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\" text-anchor=\"middle\">\n<g class=\"node\"><rect x=\"630\" y=\"138\" width=\"150\" height=\"64\" rx=\"12\" fill=\"#1b2350\" stroke=\"#7c5cff\" stroke-width=\"2.5\"\/><text x=\"705\" y=\"166\" fill=\"#e6e9ff\" font-size=\"19\" font-weight=\"700\">app.css<\/text><text x=\"705\" y=\"189\" fill=\"#8f99c9\" font-size=\"14\">@theme tokens<\/text><\/g>\n<g class=\"node\"><rect x=\"630\" y=\"348\" width=\"150\" height=\"64\" rx=\"12\" fill=\"#1b2350\" stroke=\"#3178c6\" stroke-width=\"2.5\"\/><text x=\"705\" y=\"376\" fill=\"#e6e9ff\" font-size=\"19\" font-weight=\"700\">Your HTML<\/text><text x=\"705\" y=\"399\" fill=\"#8f99c9\" font-size=\"14\">class names<\/text><\/g>\n<g class=\"node\"><rect x=\"860\" y=\"230\" width=\"140\" height=\"80\" rx=\"16\" fill=\"url(#ddh-ac)\"\/><text x=\"930\" y=\"264\" fill=\"#fff\" font-size=\"20\" font-weight=\"800\">Tailwind<\/text><text x=\"930\" y=\"290\" fill=\"#eef\" font-size=\"15\">engine<\/text><\/g>\n<g class=\"node\"><rect x=\"1050\" y=\"222\" width=\"120\" height=\"96\" rx=\"12\" fill=\"#1b2350\" stroke=\"#7c5cff\" stroke-width=\"2.5\"\/><text x=\"1110\" y=\"256\" fill=\"#e6e9ff\" font-size=\"18\" font-weight=\"700\">Small<\/text><text x=\"1110\" y=\"280\" fill=\"#e6e9ff\" font-size=\"18\" font-weight=\"700\">CSS<\/text><text x=\"1110\" y=\"304\" fill=\"#8f99c9\" font-size=\"13\">only what you use<\/text><\/g>\n<\/g>\n<circle r=\"6\" fill=\"#7c5cff\"><animateMotion dur=\"2.4s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p1\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#3178c6\"><animateMotion dur=\"2.4s\" begin=\"0.8s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p2\"\/><\/animateMotion><\/circle>\n<circle r=\"6\" fill=\"#a99bff\"><animateMotion dur=\"1.4s\" repeatCount=\"indefinite\"><mpath href=\"#ddh-p3\"\/><\/animateMotion><\/circle>\n<\/svg><\/div>\n\n<p><strong>Tailwind CSS v4<\/strong> is the biggest change to Tailwind since it was first released. There is no <code>tailwind.config.js<\/code> to start with, setup is one line of CSS, builds are much faster, and your design tokens (colors, fonts, spacing) now live in plain CSS variables. In this tutorial you will set up Tailwind CSS v4 from scratch, learn the new <code>@theme<\/code>, <code>@utility<\/code> and <code>@custom-variant<\/code> directives, add dark mode, and upgrade an old v3 project without breaking your design.<\/p>\n\n<div class=\"dd-summary\"><strong class=\"lbl\">Quick Summary<\/strong>\n<ul>\n<li>Install with <code>npm install tailwindcss @tailwindcss\/vite<\/code> (Vite) or <code>@tailwindcss\/postcss<\/code> (Next.js and other PostCSS setups).<\/li>\n<li>Your whole setup is one line in CSS: <code>@import \"tailwindcss\";<\/code><\/li>\n<li>Customize colors, fonts and breakpoints inside <code>@theme { }<\/code> using CSS variables \u2014 no JavaScript config needed.<\/li>\n<li>Upgrading from v3? Run <code>npx @tailwindcss\/upgrade<\/code> on a new git branch, then check renamed classes like <code>shadow-sm \u2192 shadow-xs<\/code> and <code>ring \u2192 ring-3<\/code>.<\/li>\n<li>Tailwind v4 needs modern browsers: Safari 16.4+, Chrome 111+ and Firefox 128+.<\/li>\n<\/ul><\/div>\n\n<nav class=\"dd-toc\" aria-label=\"Table of contents\"><strong>Table of Contents<\/strong>\n<ol>\n<li><a href=\"#what-is-new\">What is new in Tailwind CSS v4<\/a><\/li>\n<li><a href=\"#how-it-works\">How Tailwind v4 works<\/a><\/li>\n<li><a href=\"#install\">Install Tailwind CSS v4<\/a><\/li>\n<li><a href=\"#first-component\">Build your first component<\/a><\/li>\n<li><a href=\"#theme\">Customize with @theme<\/a><\/li>\n<li><a href=\"#utilities-variants\">Custom utilities and variants<\/a><\/li>\n<li><a href=\"#dark-mode\">Dark mode in Tailwind v4<\/a><\/li>\n<li><a href=\"#new-features\">New utilities worth knowing<\/a><\/li>\n<li><a href=\"#upgrade\">Upgrade from v3 to v4<\/a><\/li>\n<li><a href=\"#errors\">Common errors and fixes<\/a><\/li>\n<li><a href=\"#best-practices\">Best practices<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<\/ol><\/nav>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"what-is-new\">What is new in Tailwind CSS v4?<\/h2>\n<p>Tailwind CSS is a &#8220;utility-first&#8221; CSS framework. Instead of writing a <code>.card<\/code> class in a separate file, you style elements directly with small ready-made classes like <code>p-4<\/code>, <code>rounded-xl<\/code> and <code>bg-white<\/code>. Version 4 keeps that idea but rebuilds almost everything underneath it. The current release line is <strong>v4.3<\/strong> (v4.3.3 at the time of writing), which added scrollbar utilities on top of the v4.0 foundation.<\/p>\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>CSS-first setup<\/b>One line, <code>@import \"tailwindcss\";<\/code>, replaces the three old <code>@tailwind<\/code> lines and the config file.<\/div>\n<div class=\"dd-card\"><b>Much faster builds<\/b>A new engine makes full builds several times faster and small changes almost instant.<\/div>\n<div class=\"dd-card\"><b>Automatic file scanning<\/b>No <code>content: []<\/code> array. Tailwind finds your template files on its own and skips anything in <code>.gitignore<\/code>.<\/div>\n<div class=\"dd-card\"><b>Theme = CSS variables<\/b>Every color, font and spacing value is a real CSS variable you can use anywhere, even in plain CSS.<\/div>\n<div class=\"dd-card\"><b>Modern CSS built in<\/b>Container queries, cascade layers, <code>oklch()<\/code> colors and 3D transforms work out of the box.<\/div>\n<div class=\"dd-card\"><b>Fewer extra packages<\/b>Imports and vendor prefixes are handled for you, so <code>postcss-import<\/code> and <code>autoprefixer<\/code> are no longer needed.<\/div>\n<\/div>\n<div class=\"dd-note\"><strong>Who should use v4?<\/strong> Any new project. For existing v3 projects, upgrade when you can drop support for older browsers (see the browser list in the summary). If you must support very old Safari versions, stay on v3.4 for now.<\/div>\n\n<h2 id=\"how-it-works\">How Tailwind v4 works (in plain words)<\/h2>\n<p>Tailwind reads two things: your CSS entry file (where you import Tailwind and define your theme) and your source files (HTML, JSX, Vue, PHP and so on). It looks for class names in your source files and writes CSS only for the classes you actually used. That is why your final CSS file stays small even though Tailwind has thousands of possible classes.<\/p>\n<figure>\n<svg viewBox=\"0 0 900 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f1-t f1-d\">\n<title id=\"f1-t\">How Tailwind CSS v4 builds your CSS<\/title>\n<desc id=\"f1-d\">Diagram: app.css with @import and @theme, plus your source files, go into the Tailwind engine, which scans class names and outputs one small CSS file containing only the used utilities.<\/desc>\n<rect width=\"900\" height=\"300\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\">\n<rect x=\"30\" y=\"40\" width=\"220\" height=\"100\" rx=\"12\" fill=\"#fff\" stroke=\"#7c5cff\" stroke-width=\"2\"\/>\n<text x=\"140\" y=\"70\" text-anchor=\"middle\" font-size=\"17\" font-weight=\"700\" fill=\"#1f2433\">app.css<\/text>\n<text x=\"50\" y=\"98\" font-family=\"Consolas,monospace\" font-size=\"13\" fill=\"#3a2fa0\">@import &#8220;tailwindcss&#8221;;<\/text>\n<text x=\"50\" y=\"120\" font-family=\"Consolas,monospace\" font-size=\"13\" fill=\"#3a2fa0\">@theme { &#8211;color-brand\u2026 }<\/text>\n<rect x=\"30\" y=\"170\" width=\"220\" height=\"100\" rx=\"12\" fill=\"#fff\" stroke=\"#3178c6\" stroke-width=\"2\"\/>\n<text x=\"140\" y=\"200\" text-anchor=\"middle\" font-size=\"17\" font-weight=\"700\" fill=\"#1f2433\">Source files<\/text>\n<text x=\"50\" y=\"228\" font-family=\"Consolas,monospace\" font-size=\"13\" fill=\"#2b3a8f\">.html .jsx .tsx .vue<\/text>\n<text x=\"50\" y=\"250\" font-family=\"Consolas,monospace\" font-size=\"13\" fill=\"#2b3a8f\">class=&#8221;p-4 bg-brand&#8221;<\/text>\n<rect x=\"340\" y=\"95\" width=\"220\" height=\"120\" rx=\"16\" fill=\"#151b3b\"\/>\n<text x=\"450\" y=\"140\" text-anchor=\"middle\" font-size=\"19\" font-weight=\"800\" fill=\"#fff\">Tailwind engine<\/text>\n<text x=\"450\" y=\"166\" text-anchor=\"middle\" font-size=\"14\" fill=\"#c9d1ff\">1. read theme<\/text>\n<text x=\"450\" y=\"186\" text-anchor=\"middle\" font-size=\"14\" fill=\"#c9d1ff\">2. scan class names<\/text>\n<text x=\"450\" y=\"206\" text-anchor=\"middle\" font-size=\"14\" fill=\"#c9d1ff\">3. write used CSS only<\/text>\n<rect x=\"650\" y=\"95\" width=\"220\" height=\"120\" rx=\"12\" fill=\"#fff\" stroke=\"#1f9d61\" stroke-width=\"2\"\/>\n<text x=\"760\" y=\"135\" text-anchor=\"middle\" font-size=\"17\" font-weight=\"700\" fill=\"#1f2433\">Output CSS<\/text>\n<text x=\"760\" y=\"162\" text-anchor=\"middle\" font-size=\"14\" fill=\"#5b6275\">.p-4 { padding: \u2026 }<\/text>\n<text x=\"760\" y=\"184\" text-anchor=\"middle\" font-size=\"14\" fill=\"#5b6275\">.bg-brand { \u2026 }<\/text>\n<text x=\"760\" y=\"204\" text-anchor=\"middle\" font-size=\"13\" fill=\"#1f9d61\">small &amp; fast<\/text>\n<\/g>\n<g stroke=\"#7c5cff\" stroke-width=\"2.5\" fill=\"none\" marker-end=\"url(#f1-a)\">\n<path d=\"M250 90 C 300 90, 300 140, 338 140\"\/>\n<path d=\"M250 220 C 300 220, 300 170, 338 170\"\/>\n<path d=\"M560 155 L 646 155\"\/>\n<\/g>\n<defs><marker id=\"f1-a\" viewBox=\"0 0 10 10\" refX=\"9\" refY=\"5\" markerWidth=\"7\" markerHeight=\"7\" orient=\"auto\"><path d=\"M0 0 L10 5 L0 10 z\" fill=\"#7c5cff\"\/><\/marker><\/defs>\n<\/svg>\n<figcaption>Tailwind v4 reads your theme and scans your files, then writes CSS only for classes you really use.<\/figcaption>\n<\/figure>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"install\">How to install Tailwind CSS v4<\/h2>\n<p>Pick the tab that matches your project. Every method ends the same way: one CSS file that starts with <code>@import \"tailwindcss\";<\/code>. (Tabs below are pure CSS \u2014 click a label to switch.)<\/p>\n\n<div class=\"dd-tabs\">\n<input type=\"radio\" name=\"dd-install\" id=\"ti1\" checked>\n<input type=\"radio\" name=\"dd-install\" id=\"ti2\">\n<input type=\"radio\" name=\"dd-install\" id=\"ti3\">\n<input type=\"radio\" name=\"dd-install\" id=\"ti4\">\n<div class=\"labels\"><label for=\"ti1\">Vite (React, Vue, Svelte)<\/label><label for=\"ti2\">Next.js \/ PostCSS<\/label><label for=\"ti3\">CLI (no bundler)<\/label><label for=\"ti4\">Play CDN (testing only)<\/label><\/div>\n\n<div class=\"panel p1\">\n<p><strong>Step 1.<\/strong> Create a Vite project and install Tailwind with its Vite plugin:<\/p>\n<pre><code>npm create vite@latest my-app\ncd my-app\nnpm install tailwindcss @tailwindcss\/vite<\/code><\/pre>\n<p><strong>Step 2.<\/strong> Add the plugin to <code>vite.config.ts<\/code>:<\/p>\n<pre><code><span class=\"k\">import<\/span> { defineConfig } <span class=\"k\">from<\/span> <span class=\"s\">'vite'<\/span>\n<span class=\"k\">import<\/span> react <span class=\"k\">from<\/span> <span class=\"s\">'@vitejs\/plugin-react'<\/span>\n<span class=\"k\">import<\/span> tailwindcss <span class=\"k\">from<\/span> <span class=\"s\">'@tailwindcss\/vite'<\/span>\n\n<span class=\"k\">export default<\/span> defineConfig({\n  plugins: [react(), tailwindcss()],\n})<\/code><\/pre>\n<p><strong>Step 3.<\/strong> Replace everything in <code>src\/index.css<\/code> with:<\/p>\n<pre><code><span class=\"k\">@import<\/span> <span class=\"s\">\"tailwindcss\"<\/span>;<\/code><\/pre>\n<p>Run <code>npm run dev<\/code> and you are done. The Vite plugin is the fastest option and is the one the Tailwind team recommends for Vite projects.<\/p>\n<\/div>\n\n<div class=\"panel p2\">\n<p><strong>Step 1.<\/strong> In a Next.js app (or any PostCSS-based setup), install the PostCSS plugin:<\/p>\n<pre><code>npm install tailwindcss @tailwindcss\/postcss postcss<\/code><\/pre>\n<p><strong>Step 2.<\/strong> Create <code>postcss.config.mjs<\/code> in the project root:<\/p>\n<pre><code><span class=\"k\">const<\/span> config = {\n  plugins: {\n    <span class=\"s\">\"@tailwindcss\/postcss\"<\/span>: {},\n  },\n};\n\n<span class=\"k\">export default<\/span> config;<\/code><\/pre>\n<p><strong>Step 3.<\/strong> At the top of <code>app\/globals.css<\/code>:<\/p>\n<pre><code><span class=\"k\">@import<\/span> <span class=\"s\">\"tailwindcss\"<\/span>;<\/code><\/pre>\n<p>Make sure <code>globals.css<\/code> is imported in <code>app\/layout.tsx<\/code>. If you are learning Next.js caching too, our guide on <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/05\/nextjs-use-cache\/\">Next.js &#8220;use cache&#8221;<\/a> pairs well with this setup.<\/p>\n<\/div>\n\n<div class=\"panel p3\">\n<p>No bundler? Use the standalone CLI. Install it and create <code>src\/input.css<\/code> containing <code>@import \"tailwindcss\";<\/code>:<\/p>\n<pre><code>npm install tailwindcss @tailwindcss\/cli\nnpx @tailwindcss\/cli -i .\/src\/input.css -o .\/dist\/output.css --watch<\/code><\/pre>\n<p>Then link the output file in your HTML:<\/p>\n<pre><code>&lt;link href=\".\/dist\/output.css\" rel=\"stylesheet\"&gt;<\/code><\/pre>\n<p>This works well for plain HTML sites, PHP and WordPress themes, Django or Laravel templates.<\/p>\n<\/div>\n\n<div class=\"panel p4\">\n<p>For a quick experiment in a single HTML file, the Play CDN script compiles classes in the browser:<\/p>\n<pre><code>&lt;script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@tailwindcss\/browser@4\"&gt;&lt;\/script&gt;<\/code><\/pre>\n<p>Use this only for demos and learning. It is slow for real users and is not meant for production websites.<\/p>\n<\/div>\n<\/div>\n\n<div class=\"dd-tip\"><strong>Tip:<\/strong> Install the official <strong>Tailwind CSS IntelliSense<\/strong> extension in VS Code. It autocompletes class names, shows the CSS behind each class on hover, and understands v4&#8217;s <code>@theme<\/code> variables.<\/div>\n\n<h2 id=\"first-component\">Build your first component<\/h2>\n<p>Let&#8217;s make a simple, responsive profile card. Every class is explained right below the code.<\/p>\n<pre><code>&lt;div class=\"mx-auto max-w-sm rounded-2xl bg-white p-6 shadow-lg ring-1 ring-slate-200\"&gt;\n  &lt;div class=\"flex items-center gap-4\"&gt;\n    &lt;img class=\"size-14 rounded-full object-cover\"\n         src=\"\/avatar.jpg\" alt=\"Profile photo of Priya\" \/&gt;\n    &lt;div&gt;\n      &lt;h3 class=\"text-lg font-semibold text-slate-900\"&gt;Priya Sharma&lt;\/h3&gt;\n      &lt;p class=\"text-sm text-slate-500\"&gt;Frontend Developer, Pune&lt;\/p&gt;\n    &lt;\/div&gt;\n  &lt;\/div&gt;\n  &lt;p class=\"mt-4 text-slate-600\"&gt;\n    Loves React, clean UI and filter coffee.\n  &lt;\/p&gt;\n  &lt;button class=\"mt-5 w-full rounded-lg bg-indigo-600 px-4 py-2.5 font-medium text-white\n                 hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2\n                 focus-visible:outline-indigo-600 active:scale-95 transition\"&gt;\n    Follow\n  &lt;\/button&gt;\n&lt;\/div&gt;<\/code><\/pre>\n<ul>\n<li><code>mx-auto max-w-sm<\/code> centers the card and limits its width.<\/li>\n<li><code>size-14<\/code> sets width and height together (3.5rem each).<\/li>\n<li><code>ring-1 ring-slate-200<\/code> draws a thin outline. In v4 you always give the ring a color.<\/li>\n<li><code>hover:<\/code>, <code>focus-visible:<\/code> and <code>active:<\/code> are <em>variants<\/em> \u2014 they apply a class only in that state.<\/li>\n<li><code>py-2.5<\/code> works because v4 spacing is calculated from one base value (<code>--spacing<\/code>), so any number like <code>p-13<\/code> or <code>mt-17<\/code> is valid without extra config.<\/li>\n<\/ul>\n\n<h3>Responsive design and container queries<\/h3>\n<p>Responsive prefixes work like before: <code>md:grid-cols-2<\/code> applies from the <code>md<\/code> breakpoint (48rem) upward. New in v4, <strong>container queries<\/strong> are built in. A container query reacts to the size of the parent box instead of the whole screen, which is perfect for reusable cards.<\/p>\n<pre><code>&lt;!-- Mark the parent as a container --&gt;\n&lt;section class=\"@container\"&gt;\n  &lt;!-- 1 column by default, 2 columns when the CONTAINER is at least \"md\" wide --&gt;\n  &lt;div class=\"grid grid-cols-1 gap-4 @md:grid-cols-2 @3xl:grid-cols-3\"&gt;\n    &lt;article class=\"rounded-xl bg-white p-4 shadow\"&gt;Card A&lt;\/article&gt;\n    &lt;article class=\"rounded-xl bg-white p-4 shadow\"&gt;Card B&lt;\/article&gt;\n    &lt;article class=\"rounded-xl bg-white p-4 shadow\"&gt;Card C&lt;\/article&gt;\n  &lt;\/div&gt;\n&lt;\/section&gt;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"theme\">Customize Tailwind CSS v4 with @theme<\/h2>\n<p>In v3 you edited <code>theme.extend<\/code> inside <code>tailwind.config.js<\/code>. In v4 you write CSS variables inside an <code>@theme<\/code> block. Each variable name follows a pattern called a <em>namespace<\/em>: <code>--color-*<\/code> creates color classes, <code>--font-*<\/code> creates font classes, <code>--breakpoint-*<\/code> creates screen sizes, and so on.<\/p>\n<p class=\"dd-file\">src\/index.css<\/p>\n<pre><code><span class=\"k\">@import<\/span> <span class=\"s\">\"tailwindcss\"<\/span>;\n\n<span class=\"k\">@theme<\/span> {\n  <span class=\"c\">\/* Colors \u2192 bg-brand-500, text-brand-500, border-brand-500 \u2026 *\/<\/span>\n  --color-brand-50:  oklch(0.97 0.02 275);\n  --color-brand-500: oklch(0.60 0.20 275);\n  --color-brand-700: oklch(0.45 0.18 275);\n\n  <span class=\"c\">\/* Fonts \u2192 font-display *\/<\/span>\n  --font-display: \"Poppins\", \"sans-serif\";\n\n  <span class=\"c\">\/* New breakpoint \u2192 3xl:\u2026 *\/<\/span>\n  --breakpoint-3xl: 120rem;\n\n  <span class=\"c\">\/* Custom easing \u2192 ease-fluid *\/<\/span>\n  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);\n}<\/code><\/pre>\n<p>Now you can write <code>class=\"bg-brand-500 font-display 3xl:text-6xl ease-fluid\"<\/code>. And because every theme value is a real CSS variable, you can also use it in normal CSS or inline styles: <code>color: var(--color-brand-700);<\/code>.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 900 280\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f2-t f2-d\">\n<title id=\"f2-t\">How @theme variables become utility classes<\/title>\n<desc id=\"f2-d\">Diagram: the variable &#8211;color-brand-500 inside @theme generates classes bg-brand-500, text-brand-500, border-brand-500 and also a CSS variable you can use with var().<\/desc>\n<rect width=\"900\" height=\"280\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\">\n<rect x=\"30\" y=\"90\" width=\"260\" height=\"100\" rx=\"14\" fill=\"#151b3b\"\/>\n<text x=\"160\" y=\"125\" text-anchor=\"middle\" font-size=\"15\" fill=\"#a99bff\" font-family=\"Consolas,monospace\">@theme {<\/text>\n<text x=\"160\" y=\"152\" text-anchor=\"middle\" font-size=\"15\" fill=\"#fff\" font-family=\"Consolas,monospace\">&#8211;color-brand-500<\/text>\n<text x=\"160\" y=\"177\" text-anchor=\"middle\" font-size=\"15\" fill=\"#a99bff\" font-family=\"Consolas,monospace\">}<\/text>\n<g font-family=\"Consolas,monospace\" font-size=\"15\">\n<rect x=\"430\" y=\"22\" width=\"200\" height=\"44\" rx=\"10\" fill=\"#6c5ce7\"\/><text x=\"530\" y=\"50\" text-anchor=\"middle\" fill=\"#fff\">bg-brand-500<\/text>\n<rect x=\"430\" y=\"82\" width=\"200\" height=\"44\" rx=\"10\" fill=\"#fff\" stroke=\"#6c5ce7\" stroke-width=\"2\"\/><text x=\"530\" y=\"110\" text-anchor=\"middle\" fill=\"#6c5ce7\" font-weight=\"700\">text-brand-500<\/text>\n<rect x=\"430\" y=\"142\" width=\"200\" height=\"44\" rx=\"10\" fill=\"#fff\" stroke=\"#6c5ce7\" stroke-width=\"4\"\/><text x=\"530\" y=\"170\" text-anchor=\"middle\" fill=\"#1f2433\">border-brand-500<\/text>\n<rect x=\"430\" y=\"202\" width=\"200\" height=\"44\" rx=\"10\" fill=\"#fff\" stroke=\"#c9cfe6\" stroke-width=\"2\" stroke-dasharray=\"5 4\"\/><text x=\"530\" y=\"230\" text-anchor=\"middle\" fill=\"#1f2433\">fill-, ring-, shadow-\u2026<\/text>\n<\/g>\n<rect x=\"680\" y=\"100\" width=\"200\" height=\"80\" rx=\"12\" fill=\"#fff\" stroke=\"#1f9d61\" stroke-width=\"2\"\/>\n<text x=\"780\" y=\"132\" text-anchor=\"middle\" font-size=\"14\" fill=\"#1f2433\" font-weight=\"700\">Plain CSS too<\/text>\n<text x=\"780\" y=\"158\" text-anchor=\"middle\" font-size=\"13\" fill=\"#1f9d61\" font-family=\"Consolas,monospace\">var(&#8211;color-brand-500)<\/text>\n<\/g>\n<g stroke=\"#7c5cff\" stroke-width=\"2\" fill=\"none\">\n<path d=\"M290 140 C 360 140, 360 44, 428 44\"\/><path d=\"M290 140 C 360 140, 360 104, 428 104\"\/><path d=\"M290 140 C 360 140, 360 164, 428 164\"\/><path d=\"M290 140 C 360 140, 360 224, 428 224\"\/>\n<path d=\"M630 140 L 678 140\" stroke=\"#1f9d61\" stroke-dasharray=\"5 4\"\/>\n<\/g>\n<\/svg>\n<figcaption>One theme variable creates many matching utility classes and a reusable CSS variable.<\/figcaption>\n<\/figure>\n\n<h3>Replace or reset the default theme<\/h3>\n<p>The block above <em>adds<\/em> to Tailwind&#8217;s default colors. To remove all default colors and keep only your own brand palette, reset the namespace with <code>initial<\/code>:<\/p>\n<pre><code><span class=\"k\">@theme<\/span> {\n  --color-*: initial;          <span class=\"c\">\/* remove all default colors *\/<\/span>\n  --color-white: #fff;\n  --color-black: #0b1020;\n  --color-brand-500: oklch(0.60 0.20 275);\n}<\/code><\/pre>\n\n<h3>Using a font loaded by Next.js (@theme inline)<\/h3>\n<p>When a theme value points to another variable \u2014 for example a font loaded by <code>next\/font<\/code> \u2014 use <code>@theme inline<\/code> so the real value is used where the class is applied:<\/p>\n<pre><code><span class=\"k\">@theme inline<\/span> {\n  --font-sans: var(--font-inter);\n}<\/code><\/pre>\n\n<h2 id=\"utilities-variants\">Custom utilities and variants<\/h2>\n<p>v4 replaces <code>@layer utilities<\/code> with a simpler <code>@utility<\/code> directive. Utilities made this way work with every variant automatically (<code>hover:<\/code>, <code>md:<\/code>, <code>dark:<\/code>\u2026).<\/p>\n<pre><code><span class=\"c\">\/* A one-off custom class *\/<\/span>\n<span class=\"k\">@utility<\/span> content-auto {\n  content-visibility: auto;\n}\n\n<span class=\"c\">\/* A reusable button style built from Tailwind classes *\/<\/span>\n<span class=\"k\">@utility<\/span> btn-primary {\n  <span class=\"k\">@apply<\/span> rounded-lg bg-brand-500 px-4 py-2 font-medium text-white;\n}<\/code><\/pre>\n<p>Then use them like any other class: <code>&lt;section class=\"content-auto\"&gt;<\/code> or <code>&lt;button class=\"btn-primary md:px-6\"&gt;<\/code>.<\/p>\n<p>You can also create your own <strong>variants<\/strong> with <code>@custom-variant<\/code>. Here is a variant that applies styles when a parent has <code>data-theme=\"midnight\"<\/code>:<\/p>\n<pre><code><span class=\"k\">@custom-variant<\/span> theme-midnight (&amp;:where([data-theme=\"midnight\"] *));\n\n<span class=\"c\">\/* usage: &lt;div class=\"bg-white theme-midnight:bg-slate-950\"&gt; *\/<\/span><\/code><\/pre>\n\n<div class=\"dd-note\"><strong>Using @apply in Vue, Svelte or CSS modules?<\/strong> Those style blocks are compiled separately, so they cannot &#8220;see&#8221; your theme. Add <code>@reference \"..\/app.css\";<\/code> (path to your main CSS file) at the top of the <code>&lt;style&gt;<\/code> block. This gives access to your theme without duplicating CSS.<\/div>\n\n<h3>Tell Tailwind about extra files with @source<\/h3>\n<p>Automatic scanning covers your project, but it skips <code>node_modules<\/code> and anything in <code>.gitignore<\/code>. If a UI library from npm uses Tailwind classes, register it:<\/p>\n<pre><code><span class=\"k\">@import<\/span> <span class=\"s\">\"tailwindcss\"<\/span>;\n<span class=\"k\">@source<\/span> <span class=\"s\">\"..\/node_modules\/@my-company\/ui-lib\"<\/span>;<\/code><\/pre>\n<p>Need an official plugin like Typography? Load it straight from CSS: <code>@plugin \"@tailwindcss\/typography\";<\/code><\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"dark-mode\">Dark mode in Tailwind v4<\/h2>\n<p>By default, <code>dark:<\/code> follows the user&#8217;s operating system setting (the <code>prefers-color-scheme<\/code> media query). Nothing to configure:<\/p>\n<pre><code>&lt;div class=\"bg-white text-slate-900 dark:bg-slate-900 dark:text-slate-100\"&gt;\n  Hello, night owl!\n&lt;\/div&gt;<\/code><\/pre>\n<p>Most websites also want a manual toggle button. In v3 you set <code>darkMode: 'class'<\/code> in the config. In v4 you redefine the <code>dark<\/code> variant in CSS:<\/p>\n<pre><code><span class=\"k\">@import<\/span> <span class=\"s\">\"tailwindcss\"<\/span>;\n\n<span class=\"k\">@custom-variant<\/span> dark (&amp;:where(.dark, .dark *));<\/code><\/pre>\n<p>Now <code>dark:<\/code> classes apply whenever an ancestor (usually <code>&lt;html&gt;<\/code>) has the <code>dark<\/code> class. A tiny React toggle that remembers the choice:<\/p>\n<pre><code><span class=\"k\">export function<\/span> ThemeToggle() {\n  <span class=\"k\">function<\/span> toggle() {\n    <span class=\"k\">const<\/span> isDark = document.documentElement.classList.toggle(<span class=\"s\">\"dark\"<\/span>);\n    localStorage.setItem(<span class=\"s\">\"theme\"<\/span>, isDark ? <span class=\"s\">\"dark\"<\/span> : <span class=\"s\">\"light\"<\/span>);\n  }\n  <span class=\"k\">return<\/span> (\n    &lt;button onClick={toggle}\n      className=<span class=\"s\">\"rounded-lg border px-3 py-1.5 dark:border-slate-700\"<\/span>&gt;\n      Toggle theme\n    &lt;\/button&gt;\n  );\n}<\/code><\/pre>\n<div class=\"dd-tip\"><strong>Tip:<\/strong> To avoid a white &#8220;flash&#8221; on page load, add a small inline script in <code>&lt;head&gt;<\/code> that reads <code>localStorage.theme<\/code> and adds the <code>dark<\/code> class before the page paints.<\/div>\n\n<h2 id=\"new-features\">New utilities worth knowing<\/h2>\n<p>The v4.x releases keep adding features that used to need custom CSS. A few useful ones:<\/p>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Feature<\/th><th>Example classes<\/th><th>What it does<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>Container queries (v4.0)<\/td><td><code>@container<\/code>, <code>@md:flex<\/code><\/td><td>Style based on parent width, not screen width.<\/td><\/tr>\n<tr><td>3D transforms (v4.0)<\/td><td><code>perspective-distant<\/code>, <code>rotate-x-12<\/code><\/td><td>Tilt and flip cards in 3D.<\/td><\/tr>\n<tr><td>Gradients (v4.0)<\/td><td><code>bg-linear-45<\/code>, <code>bg-radial<\/code>, <code>bg-conic<\/code><\/td><td>Angled, radial and conic gradients. The new name for <code>bg-gradient-to-r<\/code> is <code>bg-linear-to-r<\/code>.<\/td><\/tr>\n<tr><td>Entry animations (v4.0)<\/td><td><code>starting:opacity-0<\/code><\/td><td>Animate elements when they first appear (uses <code>@starting-style<\/code>).<\/td><\/tr>\n<tr><td>Text shadows (v4.1)<\/td><td><code>text-shadow-lg<\/code><\/td><td>Soft shadows behind text.<\/td><\/tr>\n<tr><td>Masks (v4.1)<\/td><td><code>mask-b-from-50%<\/code><\/td><td>Fade an image or element out with a mask.<\/td><\/tr>\n<tr><td>New color palettes (v4.2)<\/td><td><code>bg-mauve-200<\/code>, <code>text-olive-700<\/code><\/td><td>Added mauve, olive, mist and taupe palettes.<\/td><\/tr>\n<tr><td>Scrollbars (v4.3)<\/td><td><code>scrollbar-thin<\/code>, <code>scrollbar-thumb-slate-400<\/code><\/td><td>Style scrollbar width and colors without custom CSS.<\/td><\/tr>\n<\/tbody><\/table><\/div>\n<p>A small example combining a few of these \u2014 a hero image that fades out at the bottom, with a thin styled scrollbar on a side list:<\/p>\n<pre><code>&lt;img class=\"h-64 w-full object-cover mask-b-from-50%\" src=\"\/hero.jpg\" alt=\"Mountain view at sunrise\" \/&gt;\n\n&lt;ul class=\"h-48 overflow-y-auto scrollbar-thin scrollbar-thumb-slate-400 scrollbar-track-transparent\"&gt;\n  &lt;li class=\"p-2\"&gt;Item 1&lt;\/li&gt;\n  &lt;!-- \u2026 --&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n<p>If you enjoy new CSS features, also read our guide to <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/14\/css-anchor-positioning\/\">CSS anchor positioning<\/a> \u2014 it lets you build tooltips and dropdowns without JavaScript, and it combines nicely with Tailwind.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"upgrade\">How to upgrade from Tailwind v3 to v4<\/h2>\n<p>The Tailwind team ships an automatic upgrade tool. It updates your dependencies, moves your JavaScript config into CSS and renames classes in your templates. It needs Node.js 20 or newer.<\/p>\n<pre><code><span class=\"c\"># 1. Work on a new branch so you can review every change<\/span>\ngit checkout -b upgrade-tailwind-v4\n\n<span class=\"c\"># 2. Run the official upgrade tool<\/span>\nnpx @tailwindcss\/upgrade\n\n<span class=\"c\"># 3. Review the diff and test the app in the browser<\/span>\ngit diff\nnpm run dev<\/code><\/pre>\n\n<figure>\n<svg viewBox=\"0 0 900 260\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-labelledby=\"f3-t f3-d\">\n<title id=\"f3-t\">Tailwind v3 setup compared with v4 setup<\/title>\n<desc id=\"f3-d\">Side by side: v3 needs tailwind.config.js, three @tailwind lines, postcss-import and autoprefixer. v4 needs only @import &#8220;tailwindcss&#8221; and an optional @theme block.<\/desc>\n<rect width=\"900\" height=\"260\" fill=\"#f6f7fc\"\/>\n<g font-family=\"Segoe UI,Roboto,Arial,sans-serif\">\n<rect x=\"30\" y=\"24\" width=\"380\" height=\"212\" rx=\"14\" fill=\"#fff\" stroke=\"#c9cfe6\" stroke-width=\"2\"\/>\n<text x=\"220\" y=\"56\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#5b6275\">Tailwind v3<\/text>\n<g font-family=\"Consolas,monospace\" font-size=\"14\" fill=\"#5b6275\">\n<text x=\"56\" y=\"92\">tailwind.config.js  (content, theme)<\/text>\n<text x=\"56\" y=\"120\">@tailwind base;<\/text>\n<text x=\"56\" y=\"144\">@tailwind components;<\/text>\n<text x=\"56\" y=\"168\">@tailwind utilities;<\/text>\n<text x=\"56\" y=\"200\">+ postcss-import, autoprefixer<\/text>\n<\/g>\n<rect x=\"490\" y=\"24\" width=\"380\" height=\"212\" rx=\"14\" fill=\"#151b3b\"\/>\n<text x=\"680\" y=\"56\" text-anchor=\"middle\" font-size=\"18\" font-weight=\"800\" fill=\"#fff\">Tailwind v4<\/text>\n<g font-family=\"Consolas,monospace\" font-size=\"14\" fill=\"#c9d1ff\">\n<text x=\"516\" y=\"98\"><tspan fill=\"#a99bff\">@import<\/tspan> &#8220;tailwindcss&#8221;;<\/text>\n<text x=\"516\" y=\"130\"><tspan fill=\"#a99bff\">@theme<\/tspan> {<\/text>\n<text x=\"516\" y=\"154\">  &#8211;color-brand-500: \u2026;<\/text>\n<text x=\"516\" y=\"178\">}<\/text>\n<text x=\"516\" y=\"210\" fill=\"#9be7b0\">no config file needed<\/text>\n<\/g>\n<\/g>\n<g stroke=\"#7c5cff\" stroke-width=\"3\" fill=\"none\"><path d=\"M418 130 L 482 130\"\/><path d=\"M470 120 L 482 130 L 470 140\"\/><\/g>\n<\/svg>\n<figcaption>The same setup in v3 and v4. Most of the old boilerplate disappears.<\/figcaption>\n<\/figure>\n\n<h3>Class names that changed<\/h3>\n<p>The upgrade tool renames most of these for you, but you should know them \u2014 especially when you copy old snippets from Stack Overflow or older tutorials.<\/p>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>v3 class<\/th><th>v4 class<\/th><th>Why<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>shadow-sm<\/code><\/td><td><code>shadow-xs<\/code><\/td><td>Sizes shifted to make room for a smaller step.<\/td><\/tr>\n<tr><td><code>shadow<\/code><\/td><td><code>shadow-sm<\/code><\/td><td>Bare names now have an explicit size.<\/td><\/tr>\n<tr><td><code>rounded-sm<\/code> \/ <code>rounded<\/code><\/td><td><code>rounded-xs<\/code> \/ <code>rounded-sm<\/code><\/td><td>Same size shift.<\/td><\/tr>\n<tr><td><code>blur-sm<\/code> \/ <code>drop-shadow-sm<\/code><\/td><td><code>blur-xs<\/code> \/ <code>drop-shadow-xs<\/code><\/td><td>Same size shift.<\/td><\/tr>\n<tr><td><code>outline-none<\/code><\/td><td><code>outline-hidden<\/code><\/td><td><code>outline-none<\/code> now really sets <code>outline-style: none<\/code>.<\/td><\/tr>\n<tr><td><code>ring<\/code><\/td><td><code>ring-3<\/code><\/td><td>Default ring width is now 1px, not 3px.<\/td><\/tr>\n<tr><td><code>bg-opacity-50<\/code><\/td><td><code>bg-black\/50<\/code><\/td><td>Opacity classes removed; use the slash modifier.<\/td><\/tr>\n<tr><td><code>flex-grow<\/code> \/ <code>flex-shrink-0<\/code><\/td><td><code>grow<\/code> \/ <code>shrink-0<\/code><\/td><td>Old aliases removed.<\/td><\/tr>\n<tr><td><code>!font-bold<\/code><\/td><td><code>font-bold!<\/code><\/td><td>The &#8220;important&#8221; mark now goes at the end.<\/td><\/tr>\n<tr><td><code>bg-[--brand]<\/code><\/td><td><code>bg-(--brand)<\/code><\/td><td>New short syntax for CSS variables.<\/td><\/tr>\n<tr><td><code>bg-gradient-to-r<\/code><\/td><td><code>bg-linear-to-r<\/code><\/td><td>Preferred new name (it supports more gradient types).<\/td><\/tr>\n<\/tbody><\/table><\/div>\n\n<h3>Behaviour changes to check by eye<\/h3>\n<ul>\n<li><strong>Border color:<\/strong> <code>border<\/code> now uses <code>currentColor<\/code> instead of light gray. Add a color like <code>border-slate-200<\/code> wherever borders suddenly look dark.<\/li>\n<li><strong>Ring color:<\/strong> the default ring is also <code>currentColor<\/code> now (it was blue). Add <code>ring-blue-500<\/code> where you need it.<\/li>\n<li><strong>Hover on phones:<\/strong> <code>hover:<\/code> now only applies on devices that support hover, so taps on mobile no longer leave &#8220;stuck&#8221; hover styles.<\/li>\n<li><strong>Buttons:<\/strong> buttons now use the default cursor. Add <code>cursor-pointer<\/code> if you want the hand icon.<\/li>\n<li><strong>Old JS config:<\/strong> <code>tailwind.config.js<\/code> is no longer picked up automatically. If you still need it during migration, load it with <code>@config \"..\/tailwind.config.js\";<\/code>.<\/li>\n<\/ul>\n<p>To keep the old v3 border look across the whole site while you migrate, add this to your CSS:<\/p>\n<pre><code><span class=\"k\">@layer<\/span> base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    border-color: var(--color-gray-200, currentColor);\n  }\n}<\/code><\/pre>\n<p>The official <a href=\"https:\/\/tailwindcss.com\/docs\/upgrade-guide\" target=\"_blank\" rel=\"noopener\">Tailwind CSS upgrade guide<\/a> lists every change in detail.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"errors\">Common Tailwind v4 errors and fixes<\/h2>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Problem or error<\/th><th>Why it happens<\/th><th>Fix<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>&#8220;It looks like you&#8217;re trying to use <code>tailwindcss<\/code> directly as a PostCSS plugin&#8221;<\/td><td>In v4 the PostCSS plugin moved to its own package.<\/td><td>Install <code>@tailwindcss\/postcss<\/code> and use it in <code>postcss.config.mjs<\/code>.<\/td><\/tr>\n<tr><td>No styles at all<\/td><td>CSS file still has the old <code>@tailwind<\/code> lines, or it is not imported in your app.<\/td><td>Use <code>@import \"tailwindcss\";<\/code> and import that CSS file in your entry (<code>main.tsx<\/code> or <code>layout.tsx<\/code>).<\/td><\/tr>\n<tr><td>&#8220;Cannot apply unknown utility class&#8221; in Vue\/Svelte\/CSS modules<\/td><td>The separate style block cannot see your theme.<\/td><td>Add <code>@reference \"..\/app.css\";<\/code> at the top of that style block.<\/td><\/tr>\n<tr><td>Classes from an npm UI library are missing<\/td><td><code>node_modules<\/code> is not scanned.<\/td><td>Add <code>@source \"..\/node_modules\/your-lib\";<\/code><\/td><\/tr>\n<tr><td>Dynamic classes like <code>bg-${color}-500<\/code> do not work<\/td><td>Tailwind scans text; it cannot run your code to build class names.<\/td><td>Write full class names, e.g. a map: <code>{ red: \"bg-red-500\", green: \"bg-green-500\" }<\/code>.<\/td><\/tr>\n<tr><td>Borders look dark \/ rings look thin after upgrading<\/td><td>New defaults: <code>currentColor<\/code> borders and 1px rings.<\/td><td>Add explicit colors and use <code>ring-3<\/code> where needed.<\/td><\/tr>\n<tr><td>Theme changes in <code>tailwind.config.js<\/code> are ignored<\/td><td>v4 does not auto-load JS config files.<\/td><td>Move values into <code>@theme<\/code>, or add <code>@config<\/code> temporarily.<\/td><\/tr>\n<tr><td>Sass build errors with Tailwind<\/td><td>v4 is not designed to work with Sass, Less or Stylus.<\/td><td>Use plain CSS files \u2014 nesting and variables are already supported.<\/td><\/tr>\n<\/tbody><\/table><\/div>\n\n<h2 id=\"best-practices\">Tailwind CSS v4 best practices<\/h2>\n<ol>\n<li><strong>Keep design tokens in <code>@theme<\/code>.<\/strong> Brand colors, fonts and breakpoints belong there, not as random arbitrary values like <code>bg-[#6c5ce7]<\/code> scattered across files.<\/li>\n<li><strong>Prefer components over <code>@apply<\/code>.<\/strong> In React, Vue or Svelte, a <code>&lt;Button&gt;<\/code> component is easier to maintain than a big CSS class. Use <code>@utility<\/code> + <code>@apply<\/code> only for small, truly shared styles.<\/li>\n<li><strong>Sort classes automatically<\/strong> with <code>prettier-plugin-tailwindcss<\/code> so long class lists stay readable in code reviews.<\/li>\n<li><strong>Use container queries for reusable cards<\/strong> and screen breakpoints for page layout.<\/li>\n<li><strong>Merge conflicting classes safely<\/strong> in component libraries with a helper like <code>tailwind-merge<\/code>, so <code>p-2<\/code> passed as a prop correctly overrides a default <code>p-4<\/code>.<\/li>\n<li><strong>Check accessibility:<\/strong> keep visible focus styles (<code>focus-visible:outline-2<\/code>), enough color contrast, and real <code>alt<\/code> text on images.<\/li>\n<li><strong>Upgrade on a branch<\/strong> and compare key pages side by side before merging.<\/li>\n<\/ol>\n<div class=\"dd-warn\"><strong>Interview angle:<\/strong> A common frontend interview question is &#8220;How does Tailwind keep CSS small?&#8221; A good answer: it scans your source files for class names and only generates CSS for classes it finds, so unused utilities never reach production.<\/div>\n\n<h2 id=\"faq\">Frequently Asked Questions<\/h2>\n<details><summary>Do I still need tailwind.config.js in Tailwind CSS v4?<\/summary><p>No. New projects configure everything in CSS with <code>@theme<\/code>, <code>@utility<\/code>, <code>@custom-variant<\/code>, <code>@source<\/code> and <code>@plugin<\/code>. A JS config is still supported through <code>@config<\/code>, mainly to make upgrades easier.<\/p><\/details>\n<details><summary>Is Tailwind CSS v4 free?<\/summary><p>Yes. Tailwind CSS is open source under the MIT license. Paid products such as ready-made UI kits are optional.<\/p><\/details>\n<details><summary>Does Tailwind v4 work with Next.js and React?<\/summary><p>Yes. Use <code>@tailwindcss\/postcss<\/code> for Next.js and <code>@tailwindcss\/vite<\/code> for Vite-based React apps. New Next.js projects created with <code>create-next-app<\/code> can set up Tailwind for you.<\/p><\/details>\n<details><summary>Which browsers does Tailwind v4 support?<\/summary><p>Safari 16.4+, Chrome 111+ and Firefox 128+. It relies on modern CSS features such as cascade layers and <code>color-mix()<\/code>. If you must support older browsers, stay on v3.4.<\/p><\/details>\n<details><summary>Can I use Tailwind v4 with Sass?<\/summary><p>It is not recommended and not officially supported. Modern CSS already has nesting and variables, and Tailwind v4 handles imports, so you rarely need a preprocessor.<\/p><\/details>\n<details><summary>How do I add custom colors in Tailwind v4?<\/summary><p>Add a variable inside <code>@theme<\/code>, for example <code>--color-brand-500: oklch(0.6 0.2 275);<\/code>. Tailwind then creates <code>bg-brand-500<\/code>, <code>text-brand-500<\/code>, <code>border-brand-500<\/code> and more.<\/p><\/details>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>Tailwind CSS v4 makes the framework simpler to start with and nicer to customize. Setup is one <code>@import<\/code> line, your theme is plain CSS variables, and new utilities like container queries, masks and scrollbar styles remove a lot of custom CSS. Start a small Vite or Next.js project today, add your brand colors in <code>@theme<\/code>, and try the dark mode toggle from this guide. When you are comfortable, run <code>npx @tailwindcss\/upgrade<\/code> on one of your older v3 projects. For full details, keep the official <a href=\"https:\/\/tailwindcss.com\/docs\/installation\/using-vite\" target=\"_blank\" rel=\"noopener\">Tailwind CSS installation docs<\/a> handy.<\/p>\n\n<div class=\"dd-cta\">\n<h3>New posts every day on DevDojo<\/h3>\n<p>Practical tutorials on React, Next.js, Node.js, Python, AI and DevOps \u2014 written in simple English for developers in India and around the world. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">DevDojo<\/a> and leave a comment if you want a Tailwind topic covered next!<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.<\/p>\n","protected":false},"author":1,"featured_media":211,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[91,96,110,80,111],"class_list":["post-212","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","tag-css","tag-frontend-tutorial","tag-tailwind-css","tag-vite","tag-web-design"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.3 - aioseo.com -->\n\t<meta name=\"description\" content=\"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.3\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Tailwind CSS v4 Tutorial: Setup, Theme &amp; Upgrade Guide\" \/>\n\t\t<meta property=\"og:description\" content=\"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-18T15:04:34+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-18T15:04:35+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Tailwind CSS v4 Tutorial: Setup, Theme &amp; Upgrade Guide\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#blogposting\",\"name\":\"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide\",\"headline\":\"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/tailwind-css-v4-tutorial.jpg\",\"width\":1200,\"height\":630,\"caption\":\"Tailwind CSS v4 tutorial banner showing @import \\\"tailwindcss\\\" and an @theme block flowing into the Tailwind engine\"},\"datePublished\":\"2026-10-18T15:04:34+00:00\",\"dateModified\":\"2026-10-18T15:04:35+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#webpage\"},\"articleSection\":\"Frontend, CSS, Frontend Tutorial, Tailwind CSS, Vite, Web Design\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#listItem\",\"name\":\"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#listItem\",\"position\":3,\"name\":\"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/\",\"name\":\"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide\",\"description\":\"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/tailwind-css-v4-tutorial.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"Tailwind CSS v4 tutorial banner showing @import \\\"tailwindcss\\\" and an @theme block flowing into the Tailwind engine\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/18\\\/tailwind-css-v4-tutorial\\\/#mainImage\"},\"datePublished\":\"2026-10-18T15:04:34+00:00\",\"dateModified\":\"2026-10-18T15:04:35+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide","description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#blogposting","name":"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide","headline":"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/tailwind-css-v4-tutorial.jpg","width":1200,"height":630,"caption":"Tailwind CSS v4 tutorial banner showing @import \"tailwindcss\" and an @theme block flowing into the Tailwind engine"},"datePublished":"2026-10-18T15:04:34+00:00","dateModified":"2026-10-18T15:04:35+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#webpage"},"articleSection":"Frontend, CSS, Frontend Tutorial, Tailwind CSS, Vite, Web Design"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#listItem","name":"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#listItem","position":3,"name":"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/","name":"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide","description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/tailwind-css-v4-tutorial.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#mainImage","width":1200,"height":630,"caption":"Tailwind CSS v4 tutorial banner showing @import \"tailwindcss\" and an @theme block flowing into the Tailwind engine"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/#mainImage"},"datePublished":"2026-10-18T15:04:34+00:00","dateModified":"2026-10-18T15:04:35+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"Tailwind CSS v4 Tutorial: Setup, Theme &amp; Upgrade Guide","og:description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/","article:published_time":"2026-10-18T15:04:34+00:00","article:modified_time":"2026-10-18T15:04:35+00:00","twitter:card":"summary_large_image","twitter:title":"Tailwind CSS v4 Tutorial: Setup, Theme &amp; Upgrade Guide","twitter:description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design."},"aioseo_meta_data":{"post_id":"212","title":"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide","description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.","keywords":null,"keyphrases":{"focus":{"keyphrase":"Tailwind CSS v4"},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"Tailwind CSS v4 Tutorial: Setup, Theme & Upgrade Guide","og_description":"Learn Tailwind CSS v4 step by step: install with Vite or Next.js, customize with @theme, add dark mode, and upgrade from v3 without breaking your design.","og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-10-18 13:03:19","updated":"2026-10-18 17:14:18","focus_keyword":"Tailwind CSS v4","additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tTailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"Tailwind CSS v4 Tutorial: Setup, @theme and Upgrading from v3","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/18\/tailwind-css-v4-tutorial\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=212"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions"}],"predecessor-version":[{"id":213,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/212\/revisions\/213"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/211"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}