[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"roadmap-learn-tailwind-css-4-from-scratch-to-modern-responsive-websites-es":3},{"data":4,"meta":2624},[5],{"id":6,"documentId":7,"title":8,"slug":9,"excerpt":10,"level":11,"durationEstimate":12,"body":13,"createdAt":2424,"updatedAt":2424,"publishedAt":2425,"coverImage":2426,"author":2472,"relatedStacks":2480},27,"kt0kul82hiu148f5xhon6lyh","Learn Tailwind CSS 4 from Scratch to Modern Responsive Websites","learn-tailwind-css-4-from-scratch-to-modern-responsive-websites","A complete beginner-friendly roadmap to learn Tailwind CSS 4, master modern utility-first styling, and build beautiful responsive websites using only HTML and Tailwind.","beginner","2 to 4 weeks",[14,20,24,28,32,36,40,44,48,52,56,59,63,67,71,75,79,83,87,91,95,98,102,106,109,113,117,121,125,129,133,136,140,143,147,151,155,159,162,166,169,173,176,180,183,187,191,195,199,203,206,210,214,218,221,225,228,232,236,240,244,247,251,254,258,262,265,268,272,275,278,282,286,290,294,298,302,306,310,314,318,322,326,330,334,338,342,346,350,354,358,361,364,368,371,375,378,382,385,388,392,395,399,403,407,411,415,419,423,427,431,435,438,441,445,448,452,455,459,463,466,470,474,478,482,486,489,493,497,501,505,509,513,517,520,524,528,531,534,538,542,546,550,554,558,562,565,568,572,576,580,584,588,591,595,599,602,605,609,613,617,621,625,629,632,635,639,643,647,651,655,659,662,666,670,673,676,680,684,688,692,696,700,704,708,711,714,717,721,725,729,733,736,740,744,747,750,754,758,762,766,770,773,777,780,784,788,792,796,800,803,807,810,813,816,820,824,828,832,835,839,843,846,849,853,857,861,865,869,872,875,879,882,886,889,893,897,900,903,906,910,914,917,921,924,927,930,934,938,942,946,950,954,957,961,964,968,972,975,979,982,986,989,993,996,1000,1004,1008,1012,1016,1020,1024,1028,1032,1036,1040,1044,1048,1052,1056,1060,1063,1066,1070,1074,1078,1082,1086,1090,1093,1097,1100,1104,1108,1112,1116,1120,1124,1128,1132,1135,1138,1141,1145,1149,1153,1157,1161,1164,1168,1172,1175,1178,1182,1186,1189,1192,1195,1198,1201,1204,1208,1212,1216,1220,1223,1227,1230,1234,1238,1242,1246,1250,1254,1258,1262,1266,1269,1273,1276,1280,1284,1288,1292,1296,1300,1303,1307,1311,1315,1319,1322,1325,1328,1332,1336,1340,1343,1346,1349,1352,1355,1358,1361,1365,1369,1373,1377,1380,1384,1388,1391,1395,1399,1403,1407,1411,1415,1419,1423,1427,1431,1434,1438,1441,1444,1447,1450,1453,1456,1460,1463,1467,1471,1475,1479,1483,1487,1491,1495,1499,1503,1507,1511,1514,1518,1521,1525,1529,1533,1537,1541,1545,1549,1553,1557,1561,1565,1569,1573,1577,1581,1585,1589,1593,1596,1600,1604,1607,1611,1615,1619,1623,1627,1631,1635,1639,1643,1647,1651,1654,1658,1662,1665,1668,1672,1676,1680,1683,1686,1689,1692,1696,1699,1703,1707,1711,1715,1719,1723,1727,1731,1735,1738,1741,1744,1748,1752,1756,1760,1764,1767,1771,1775,1778,1781,1785,1789,1792,1795,1798,1801,1804,1808,1812,1816,1820,1824,1827,1830,1834,1838,1841,1844,1848,1852,1855,1858,1861,1864,1868,1871,1875,1879,1882,1886,1889,1892,1895,1898,1902,1906,1910,1914,1917,1921,1925,1928,1931,1935,1939,1942,1945,1948,1951,1954,1958,1961,1964,1968,1971,1975,1978,1982,1986,1989,1992,1995,1999,2003,2007,2011,2015,2018,2022,2026,2030,2034,2037,2040,2044,2048,2052,2055,2058,2061,2064,2067,2071,2075,2079,2083,2087,2091,2095,2099,2103,2107,2110,2113,2116,2119,2123,2127,2131,2135,2139,2143,2147,2150,2153,2157,2160,2163,2166,2169,2172,2175,2179,2183,2187,2191,2195,2199,2203,2207,2211,2215,2219,2223,2226,2230,2233,2237,2241,2245,2248,2252,2256,2259,2263,2267,2270,2274,2278,2281,2285,2289,2292,2296,2300,2304,2307,2311,2315,2319,2323,2327,2331,2335,2339,2342,2346,2350,2354,2358,2362,2366,2370,2374,2377,2381,2385,2389,2393,2396,2400,2404,2408,2412,2416,2420],{"type":15,"children":16},"paragraph",[17],{"text":18,"type":19},"## What Tailwind CSS 4, is a","text",{"type":15,"children":21},[22],{"text":23,"type":19},"**Utility-first CSS framework**. That means you build designs by composing utility classes directly in your HTML instead of writing a lot of custom CSS for every component. The official docs describe it exactly that way: styling by combining small, single-purpose utility classes directly in markup. ([tailwindcss.com][2])",{"type":15,"children":25},[26],{"text":27,"type":19},"",{"type":15,"children":29},[30],{"text":31,"type":19},"If your goal is to create:",{"type":15,"children":33},[34],{"text":35,"type":19},"* beautiful landing pages,",{"type":15,"children":37},[38],{"text":39,"type":19},"* clean portfolios,",{"type":15,"children":41},[42],{"text":43,"type":19},"* elegant blog layouts,",{"type":15,"children":45},[46],{"text":47,"type":19},"* responsive product pages,",{"type":15,"children":49},[50],{"text":51,"type":19},"* and modern UI sections,",{"type":15,"children":53},[54],{"text":55,"type":19},"then Tailwind is one of the cleanest tools to learn for that.",{"type":15,"children":57},[58],{"text":27,"type":19},{"type":15,"children":60},[61],{"text":62,"type":19},"## What you will learn by the end",{"type":15,"children":64},[65],{"text":66,"type":19},"By the end of this roadmap, you should be able to:",{"type":15,"children":68},[69],{"text":70,"type":19},"* install Tailwind CSS 4 correctly with **Vite**,",{"type":15,"children":72},[73],{"text":74,"type":19},"* understand how utility classes work,",{"type":15,"children":76},[77],{"text":78,"type":19},"* build spacing, layout, color, typography, and component systems,",{"type":15,"children":80},[81],{"text":82,"type":19},"* create responsive sections with mobile-first design,",{"type":15,"children":84},[85],{"text":86,"type":19},"* work with dark mode,",{"type":15,"children":88},[89],{"text":90,"type":19},"* customize your design tokens using `@theme`,",{"type":15,"children":92},[93],{"text":94,"type":19},"* and build a full responsive website using **only HTML + Tailwind**. ([tailwindcss.com][1])",{"type":15,"children":96},[97],{"text":27,"type":19},{"type":15,"children":99},[100],{"text":101,"type":19},"## Part 1 — Installation with Vite",{"type":15,"children":103},[104],{"text":105,"type":19},"Tailwind’s official docs say the **Vite plugin is the most seamless way** to install Tailwind in modern projects. ([tailwindcss.com][1])",{"type":15,"children":107},[108],{"text":27,"type":19},{"type":15,"children":110},[111],{"text":112,"type":19},"### Step 1: Create the project",{"type":15,"children":114},[115],{"text":116,"type":19},"```bash",{"type":15,"children":118},[119],{"text":120,"type":19},"npm create vite@latest tailwind4-html-site",{"type":15,"children":122},[123],{"text":124,"type":19},"cd tailwind4-html-site",{"type":15,"children":126},[127],{"text":128,"type":19},"npm install",{"type":15,"children":130},[131],{"text":132,"type":19},"```",{"type":15,"children":134},[135],{"text":27,"type":19},{"type":15,"children":137},[138],{"text":139,"type":19},"This is the official starting point for the Vite-based install flow. ([tailwindcss.com][1])",{"type":15,"children":141},[142],{"text":27,"type":19},{"type":15,"children":144},[145],{"text":146,"type":19},"For this roadmap, choose:",{"type":15,"children":148},[149],{"text":150,"type":19},"* **Vanilla**",{"type":15,"children":152},[153],{"text":154,"type":19},"* **JavaScript**",{"type":15,"children":156},[157],{"text":158,"type":19},"  so the project stays simple and HTML-focused.",{"type":15,"children":160},[161],{"text":27,"type":19},{"type":15,"children":163},[164],{"text":165,"type":19},"### Step 2: Install Tailwind CSS 4",{"type":15,"children":167},[168],{"text":116,"type":19},{"type":15,"children":170},[171],{"text":172,"type":19},"npm install tailwindcss @tailwindcss/vite",{"type":15,"children":174},[175],{"text":132,"type":19},{"type":15,"children":177},[178],{"text":179,"type":19},"Those are the official packages for the Vite setup. ([tailwindcss.com][1])",{"type":15,"children":181},[182],{"text":27,"type":19},{"type":15,"children":184},[185],{"text":186,"type":19},"### Step 3: Configure Vite",{"type":15,"children":188},[189],{"text":190,"type":19},"Edit `vite.config.js`:",{"type":15,"children":192},[193],{"text":194,"type":19},"```js",{"type":15,"children":196},[197],{"text":198,"type":19},"import { defineConfig } from \"vite\";",{"type":15,"children":200},[201],{"text":202,"type":19},"import tailwindcss from \"@tailwindcss/vite\";",{"type":15,"children":204},[205],{"text":27,"type":19},{"type":15,"children":207},[208],{"text":209,"type":19},"export default defineConfig({",{"type":15,"children":211},[212],{"text":213,"type":19},"  plugins: [tailwindcss()],",{"type":15,"children":215},[216],{"text":217,"type":19},"});",{"type":15,"children":219},[220],{"text":132,"type":19},{"type":15,"children":222},[223],{"text":224,"type":19},"That is the official Vite plugin pattern from Tailwind’s docs. ([tailwindcss.com][1])",{"type":15,"children":226},[227],{"text":27,"type":19},{"type":15,"children":229},[230],{"text":231,"type":19},"### Step 4: Import Tailwind in your CSS",{"type":15,"children":233},[234],{"text":235,"type":19},"Create `src/style.css`:",{"type":15,"children":237},[238],{"text":239,"type":19},"```css",{"type":15,"children":241},[242],{"text":243,"type":19},"@import \"tailwindcss\";",{"type":15,"children":245},[246],{"text":132,"type":19},{"type":15,"children":248},[249],{"text":250,"type":19},"In Tailwind v4, this is the standard entry point. The old `@tailwind base;`, `@tailwind components;`, and `@tailwind utilities;` approach is not the modern v4 path. ([tailwindcss.com][3])",{"type":15,"children":252},[253],{"text":27,"type":19},{"type":15,"children":255},[256],{"text":257,"type":19},"### Step 5: Load the CSS",{"type":15,"children":259},[260],{"text":261,"type":19},"In `main.js`:",{"type":15,"children":263},[264],{"text":27,"type":19},{"type":15,"children":266},[267],{"text":194,"type":19},{"type":15,"children":269},[270],{"text":271,"type":19},"import \"./style.css\";",{"type":15,"children":273},[274],{"text":132,"type":19},{"type":15,"children":276},[277],{"text":27,"type":19},{"type":15,"children":279},[280],{"text":281,"type":19},"### Step 6: Add your HTML",{"type":15,"children":283},[284],{"text":285,"type":19},"Replace `index.html` with:",{"type":15,"children":287},[288],{"text":289,"type":19},"```html",{"type":15,"children":291},[292],{"text":293,"type":19},"\u003C!doctype html>",{"type":15,"children":295},[296],{"text":297,"type":19},"\u003Chtml lang=\"en\">",{"type":15,"children":299},[300],{"text":301,"type":19},"  \u003Chead>",{"type":15,"children":303},[304],{"text":305,"type":19},"    \u003Cmeta charset=\"UTF-8\" />",{"type":15,"children":307},[308],{"text":309,"type":19},"    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />",{"type":15,"children":311},[312],{"text":313,"type":19},"    \u003Ctitle>Tailwind CSS 4\u003C/title>",{"type":15,"children":315},[316],{"text":317,"type":19},"  \u003C/head>",{"type":15,"children":319},[320],{"text":321,"type":19},"  \u003Cbody class=\"bg-slate-100 text-slate-900\">",{"type":15,"children":323},[324],{"text":325,"type":19},"    \u003Cmain class=\"mx-auto max-w-5xl px-6 py-16\">",{"type":15,"children":327},[328],{"text":329,"type":19},"      \u003Ch1 class=\"text-4xl font-bold tracking-tight\">Tailwind CSS 4 is working\u003C/h1>",{"type":15,"children":331},[332],{"text":333,"type":19},"      \u003Cp class=\"mt-4 text-lg text-slate-600\">",{"type":15,"children":335},[336],{"text":337,"type":19},"        Your setup is ready. Time to build something that actually looks good.",{"type":15,"children":339},[340],{"text":341,"type":19},"      \u003C/p>",{"type":15,"children":343},[344],{"text":345,"type":19},"    \u003C/main>",{"type":15,"children":347},[348],{"text":349,"type":19},"    \u003Cscript type=\"module\" src=\"/main.js\">\u003C/script>",{"type":15,"children":351},[352],{"text":353,"type":19},"  \u003C/body>",{"type":15,"children":355},[356],{"text":357,"type":19},"\u003C/html>",{"type":15,"children":359},[360],{"text":132,"type":19},{"type":15,"children":362},[363],{"text":27,"type":19},{"type":15,"children":365},[366],{"text":367,"type":19},"Tailwind’s docs also emphasize the viewport meta tag as part of responsive setup. ([tailwindcss.com][4])",{"type":15,"children":369},[370],{"text":27,"type":19},{"type":15,"children":372},[373],{"text":374,"type":19},"### Step 7: Run the project",{"type":15,"children":376},[377],{"text":116,"type":19},{"type":15,"children":379},[380],{"text":381,"type":19},"npm run dev",{"type":15,"children":383},[384],{"text":132,"type":19},{"type":15,"children":386},[387],{"text":27,"type":19},{"type":15,"children":389},[390],{"text":391,"type":19},"At this point, Tailwind is installed and ready. ([tailwindcss.com][1])",{"type":15,"children":393},[394],{"text":27,"type":19},{"type":15,"children":396},[397],{"text":398,"type":19},"## Part 2 — Project structure for this roadmap",{"type":15,"children":400},[401],{"text":402,"type":19},"Use this simple structure:",{"type":15,"children":404},[405],{"text":406,"type":19},"```txt",{"type":15,"children":408},[409],{"text":410,"type":19},"tailwind4-html-site/",{"type":15,"children":412},[413],{"text":414,"type":19},"├─ index.html",{"type":15,"children":416},[417],{"text":418,"type":19},"├─ package.json",{"type":15,"children":420},[421],{"text":422,"type":19},"├─ vite.config.js",{"type":15,"children":424},[425],{"text":426,"type":19},"├─ main.js",{"type":15,"children":428},[429],{"text":430,"type":19},"└─ src/",{"type":15,"children":432},[433],{"text":434,"type":19},"   └─ style.css",{"type":15,"children":436},[437],{"text":132,"type":19},{"type":15,"children":439},[440],{"text":27,"type":19},{"type":15,"children":442},[443],{"text":444,"type":19},"You do not need a complicated setup to learn Tailwind. Half the internet loves turning a spoon into a spaceship.",{"type":15,"children":446},[447],{"text":27,"type":19},{"type":15,"children":449},[450],{"text":451,"type":19},"## Part 3 — Tailwind CSS 4 fundamentals roadmap",{"type":15,"children":453},[454],{"text":27,"type":19},{"type":15,"children":456},[457],{"text":458,"type":19},"### Phase 1 — Learn the utility-first mindset",{"type":15,"children":460},[461],{"text":462,"type":19},"Tailwind wants you to style directly in HTML using small utility classes. That is the entire game. If you keep trying to treat it like traditional CSS-first component naming, you will fight the framework for no reason. ([tailwindcss.com][5])",{"type":15,"children":464},[465],{"text":27,"type":19},{"type":15,"children":467},[468],{"text":469,"type":19},"#### Learn:",{"type":15,"children":471},[472],{"text":473,"type":19},"* what utility-first means",{"type":15,"children":475},[476],{"text":477,"type":19},"* how class composition works",{"type":15,"children":479},[480],{"text":481,"type":19},"* why consistency matters",{"type":15,"children":483},[484],{"text":485,"type":19},"* why spacing and structure beat visual chaos",{"type":15,"children":487},[488],{"text":27,"type":19},{"type":15,"children":490},[491],{"text":492,"type":19},"#### Practice:",{"type":15,"children":494},[495],{"text":496,"type":19},"Build these tiny pieces:",{"type":15,"children":498},[499],{"text":500,"type":19},"* one centered card",{"type":15,"children":502},[503],{"text":504,"type":19},"* one button",{"type":15,"children":506},[507],{"text":508,"type":19},"* one badge",{"type":15,"children":510},[511],{"text":512,"type":19},"* one text block",{"type":15,"children":514},[515],{"text":516,"type":19},"* one callout section",{"type":15,"children":518},[519],{"text":27,"type":19},{"type":15,"children":521},[522],{"text":523,"type":19},"### Phase 2 — Learn spacing, sizing, and alignment",{"type":15,"children":525},[526],{"text":527,"type":19},"This is the backbone of all good UI.",{"type":15,"children":529},[530],{"text":27,"type":19},{"type":15,"children":532},[533],{"text":469,"type":19},{"type":15,"children":535},[536],{"text":537,"type":19},"* `p-*`, `px-*`, `py-*`",{"type":15,"children":539},[540],{"text":541,"type":19},"* `m-*`, `mt-*`, `mb-*`",{"type":15,"children":543},[544],{"text":545,"type":19},"* `gap-*`",{"type":15,"children":547},[548],{"text":549,"type":19},"* `w-*`, `h-*`, `max-w-*`",{"type":15,"children":551},[552],{"text":553,"type":19},"* `mx-auto`",{"type":15,"children":555},[556],{"text":557,"type":19},"* `flex`, `grid`",{"type":15,"children":559},[560],{"text":561,"type":19},"* `items-*`, `justify-*`",{"type":15,"children":563},[564],{"text":27,"type":19},{"type":15,"children":566},[567],{"text":492,"type":19},{"type":15,"children":569},[570],{"text":571,"type":19},"Create:",{"type":15,"children":573},[574],{"text":575,"type":19},"* a centered profile card",{"type":15,"children":577},[578],{"text":579,"type":19},"* a 2-column features row",{"type":15,"children":581},[582],{"text":583,"type":19},"* a stacked mobile section",{"type":15,"children":585},[586],{"text":587,"type":19},"* a button row with equal spacing",{"type":15,"children":589},[590],{"text":27,"type":19},{"type":15,"children":592},[593],{"text":594,"type":19},"### Phase 3 — Learn typography and hierarchy",{"type":15,"children":596},[597],{"text":598,"type":19},"Most ugly pages are not broken by CSS. They are broken by bad text hierarchy.",{"type":15,"children":600},[601],{"text":27,"type":19},{"type":15,"children":603},[604],{"text":469,"type":19},{"type":15,"children":606},[607],{"text":608,"type":19},"* `text-sm` to `text-6xl`",{"type":15,"children":610},[611],{"text":612,"type":19},"* `font-medium`, `font-semibold`, `font-bold`",{"type":15,"children":614},[615],{"text":616,"type":19},"* `leading-tight`, `leading-relaxed`",{"type":15,"children":618},[619],{"text":620,"type":19},"* `tracking-tight`",{"type":15,"children":622},[623],{"text":624,"type":19},"* `text-slate-*`",{"type":15,"children":626},[627],{"text":628,"type":19},"* `max-w-prose` style thinking through width control",{"type":15,"children":630},[631],{"text":27,"type":19},{"type":15,"children":633},[634],{"text":492,"type":19},{"type":15,"children":636},[637],{"text":638,"type":19},"Build:",{"type":15,"children":640},[641],{"text":642,"type":19},"* a hero heading",{"type":15,"children":644},[645],{"text":646,"type":19},"* a subheading",{"type":15,"children":648},[649],{"text":650,"type":19},"* a pricing card title",{"type":15,"children":652},[653],{"text":654,"type":19},"* a section intro",{"type":15,"children":656},[657],{"text":658,"type":19},"* an article preview block",{"type":15,"children":660},[661],{"text":27,"type":19},{"type":15,"children":663},[664],{"text":665,"type":19},"### Phase 4 — Learn colors, borders, shadows, and surfaces",{"type":15,"children":667},[668],{"text":669,"type":19},"This is where pages start looking modern instead of plain.",{"type":15,"children":671},[672],{"text":27,"type":19},{"type":15,"children":674},[675],{"text":469,"type":19},{"type":15,"children":677},[678],{"text":679,"type":19},"* `bg-*`",{"type":15,"children":681},[682],{"text":683,"type":19},"* `text-*`",{"type":15,"children":685},[686],{"text":687,"type":19},"* `border`",{"type":15,"children":689},[690],{"text":691,"type":19},"* `rounded-*`",{"type":15,"children":693},[694],{"text":695,"type":19},"* `shadow-*`",{"type":15,"children":697},[698],{"text":699,"type":19},"* light surface vs dark surface",{"type":15,"children":701},[702],{"text":703,"type":19},"* accent color usage",{"type":15,"children":705},[706],{"text":707,"type":19},"* muted text",{"type":15,"children":709},[710],{"text":27,"type":19},{"type":15,"children":712},[713],{"text":492,"type":19},{"type":15,"children":715},[716],{"text":638,"type":19},{"type":15,"children":718},[719],{"text":720,"type":19},"* a clean card",{"type":15,"children":722},[723],{"text":724,"type":19},"* a dark card",{"type":15,"children":726},[727],{"text":728,"type":19},"* a CTA block",{"type":15,"children":730},[731],{"text":732,"type":19},"* a feature section with 3 colored icons or badges",{"type":15,"children":734},[735],{"text":27,"type":19},{"type":15,"children":737},[738],{"text":739,"type":19},"### Phase 5 — Learn responsive design properly",{"type":15,"children":741},[742],{"text":743,"type":19},"Tailwind’s docs state that **every utility class can be applied conditionally at different breakpoints**, which is the core of how responsive design works in Tailwind. ([tailwindcss.com][4])",{"type":15,"children":745},[746],{"text":27,"type":19},{"type":15,"children":748},[749],{"text":469,"type":19},{"type":15,"children":751},[752],{"text":753,"type":19},"* mobile-first design",{"type":15,"children":755},[756],{"text":757,"type":19},"* `sm:`, `md:`, `lg:`, `xl:`",{"type":15,"children":759},[760],{"text":761,"type":19},"* stacking on mobile",{"type":15,"children":763},[764],{"text":765,"type":19},"* splitting layouts on larger screens",{"type":15,"children":767},[768],{"text":769,"type":19},"* scaling text and spacing by breakpoint",{"type":15,"children":771},[772],{"text":27,"type":19},{"type":15,"children":774},[775],{"text":776,"type":19},"#### Example:",{"type":15,"children":778},[779],{"text":289,"type":19},{"type":15,"children":781},[782],{"text":783,"type":19},"\u003Cdiv class=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">",{"type":15,"children":785},[786],{"text":787,"type":19},"  \u003Cdiv class=\"rounded-2xl bg-white p-6 shadow-sm\">Card 1\u003C/div>",{"type":15,"children":789},[790],{"text":791,"type":19},"  \u003Cdiv class=\"rounded-2xl bg-white p-6 shadow-sm\">Card 2\u003C/div>",{"type":15,"children":793},[794],{"text":795,"type":19},"  \u003Cdiv class=\"rounded-2xl bg-white p-6 shadow-sm\">Card 3\u003C/div>",{"type":15,"children":797},[798],{"text":799,"type":19},"\u003C/div>",{"type":15,"children":801},[802],{"text":132,"type":19},{"type":15,"children":804},[805],{"text":806,"type":19},"That mobile-first responsive pattern matches the official responsive design model. ([tailwindcss.com][4])",{"type":15,"children":808},[809],{"text":27,"type":19},{"type":15,"children":811},[812],{"text":492,"type":19},{"type":15,"children":814},[815],{"text":638,"type":19},{"type":15,"children":817},[818],{"text":819,"type":19},"* responsive hero",{"type":15,"children":821},[822],{"text":823,"type":19},"* responsive features grid",{"type":15,"children":825},[826],{"text":827,"type":19},"* responsive pricing cards",{"type":15,"children":829},[830],{"text":831,"type":19},"* responsive footer columns",{"type":15,"children":833},[834],{"text":27,"type":19},{"type":15,"children":836},[837],{"text":838,"type":19},"### Phase 6 — Learn dark mode",{"type":15,"children":840},[841],{"text":842,"type":19},"Tailwind includes a built-in `dark` variant for dark mode styling. ([tailwindcss.com][6])",{"type":15,"children":844},[845],{"text":27,"type":19},{"type":15,"children":847},[848],{"text":469,"type":19},{"type":15,"children":850},[851],{"text":852,"type":19},"* `dark:bg-*`",{"type":15,"children":854},[855],{"text":856,"type":19},"* `dark:text-*`",{"type":15,"children":858},[859],{"text":860,"type":19},"* `dark:border-*`",{"type":15,"children":862},[863],{"text":864,"type":19},"* keeping contrast readable",{"type":15,"children":866},[867],{"text":868,"type":19},"* designing soft dark surfaces instead of pure black everything",{"type":15,"children":870},[871],{"text":27,"type":19},{"type":15,"children":873},[874],{"text":492,"type":19},{"type":15,"children":876},[877],{"text":878,"type":19},"Take one light card and make a dark version.",{"type":15,"children":880},[881],{"text":27,"type":19},{"type":15,"children":883},[884],{"text":885,"type":19},"Example:",{"type":15,"children":887},[888],{"text":289,"type":19},{"type":15,"children":890},[891],{"text":892,"type":19},"\u003Cdiv class=\"rounded-2xl border border-slate-200 bg-white p-6 text-slate-900 dark:border-slate-800 dark:bg-slate-900 dark:text-white\">",{"type":15,"children":894},[895],{"text":896,"type":19},"  Modern card",{"type":15,"children":898},[899],{"text":799,"type":19},{"type":15,"children":901},[902],{"text":132,"type":19},{"type":15,"children":904},[905],{"text":27,"type":19},{"type":15,"children":907},[908],{"text":909,"type":19},"### Phase 7 — Learn theme customization in Tailwind 4",{"type":15,"children":911},[912],{"text":913,"type":19},"In Tailwind v4, theme customization is **CSS-first** using `@theme`. Tailwind’s docs describe theme variables as the place to store design tokens like colors, fonts, and breakpoints. ([tailwindcss.com][7])",{"type":15,"children":915},[916],{"text":27,"type":19},{"type":15,"children":918},[919],{"text":920,"type":19},"Update `src/style.css`:",{"type":15,"children":922},[923],{"text":239,"type":19},{"type":15,"children":925},[926],{"text":243,"type":19},{"type":15,"children":928},[929],{"text":27,"type":19},{"type":15,"children":931},[932],{"text":933,"type":19},"@theme {",{"type":15,"children":935},[936],{"text":937,"type":19},"  --color-brand-500: oklch(0.62 0.18 258);",{"type":15,"children":939},[940],{"text":941,"type":19},"  --color-brand-600: oklch(0.54 0.2 260);",{"type":15,"children":943},[944],{"text":945,"type":19},"  --font-display: \"Inter\", \"sans-serif\";",{"type":15,"children":947},[948],{"text":949,"type":19},"  --breakpoint-3xl: 120rem;",{"type":15,"children":951},[952],{"text":953,"type":19},"}",{"type":15,"children":955},[956],{"text":132,"type":19},{"type":15,"children":958},[959],{"text":960,"type":19},"Now you can use classes like:",{"type":15,"children":962},[963],{"text":27,"type":19},{"type":15,"children":965},[966],{"text":967,"type":19},"* `bg-brand-500`",{"type":15,"children":969},[970],{"text":971,"type":19},"* `text-brand-600`",{"type":15,"children":973},[974],{"text":27,"type":19},{"type":15,"children":976},[977],{"text":978,"type":19},"This is one of the biggest v4 differences from older Tailwind tutorials. ([tailwindcss.com][7])",{"type":15,"children":980},[981],{"text":27,"type":19},{"type":15,"children":983},[984],{"text":985,"type":19},"## Part 4 — Practice roadmap by projects",{"type":15,"children":987},[988],{"text":27,"type":19},{"type":15,"children":990},[991],{"text":992,"type":19},"## Practice 1 — Simple profile card",{"type":15,"children":994},[995],{"text":289,"type":19},{"type":15,"children":997},[998],{"text":999,"type":19},"\u003Csection class=\"mx-auto max-w-sm px-6 py-16\">",{"type":15,"children":1001},[1002],{"text":1003,"type":19},"  \u003Cdiv class=\"rounded-3xl border border-slate-200 bg-white p-8 shadow-sm\">",{"type":15,"children":1005},[1006],{"text":1007,"type":19},"    \u003Cdiv class=\"h-16 w-16 rounded-full bg-slate-200\">\u003C/div>",{"type":15,"children":1009},[1010],{"text":1011,"type":19},"    \u003Ch2 class=\"mt-4 text-2xl font-bold text-slate-900\">Alex Carter\u003C/h2>",{"type":15,"children":1013},[1014],{"text":1015,"type":19},"    \u003Cp class=\"mt-2 text-sm text-slate-500\">Frontend Developer\u003C/p>",{"type":15,"children":1017},[1018],{"text":1019,"type":19},"    \u003Cp class=\"mt-4 text-slate-600\">",{"type":15,"children":1021},[1022],{"text":1023,"type":19},"      Building clean and modern interfaces with performance in mind.",{"type":15,"children":1025},[1026],{"text":1027,"type":19},"    \u003C/p>",{"type":15,"children":1029},[1030],{"text":1031,"type":19},"    \u003Ca",{"type":15,"children":1033},[1034],{"text":1035,"type":19},"      href=\"#\"",{"type":15,"children":1037},[1038],{"text":1039,"type":19},"      class=\"mt-6 inline-flex rounded-xl bg-slate-900 px-4 py-3 text-sm font-semibold text-white hover:bg-slate-800\"",{"type":15,"children":1041},[1042],{"text":1043,"type":19},"    >",{"type":15,"children":1045},[1046],{"text":1047,"type":19},"      View Profile",{"type":15,"children":1049},[1050],{"text":1051,"type":19},"    \u003C/a>",{"type":15,"children":1053},[1054],{"text":1055,"type":19},"  \u003C/div>",{"type":15,"children":1057},[1058],{"text":1059,"type":19},"\u003C/section>",{"type":15,"children":1061},[1062],{"text":132,"type":19},{"type":15,"children":1064},[1065],{"text":27,"type":19},{"type":15,"children":1067},[1068],{"text":1069,"type":19},"### What you learn:",{"type":15,"children":1071},[1072],{"text":1073,"type":19},"* spacing",{"type":15,"children":1075},[1076],{"text":1077,"type":19},"* border radius",{"type":15,"children":1079},[1080],{"text":1081,"type":19},"* typography",{"type":15,"children":1083},[1084],{"text":1085,"type":19},"* shadow",{"type":15,"children":1087},[1088],{"text":1089,"type":19},"* button styling",{"type":15,"children":1091},[1092],{"text":27,"type":19},{"type":15,"children":1094},[1095],{"text":1096,"type":19},"## Practice 2 — Responsive feature cards",{"type":15,"children":1098},[1099],{"text":289,"type":19},{"type":15,"children":1101},[1102],{"text":1103,"type":19},"\u003Csection class=\"mx-auto max-w-6xl px-6 py-16\">",{"type":15,"children":1105},[1106],{"text":1107,"type":19},"  \u003Cdiv class=\"max-w-2xl\">",{"type":15,"children":1109},[1110],{"text":1111,"type":19},"    \u003Cp class=\"text-sm font-semibold text-indigo-600\">Features\u003C/p>",{"type":15,"children":1113},[1114],{"text":1115,"type":19},"    \u003Ch2 class=\"mt-2 text-3xl font-bold tracking-tight text-slate-900 sm:text-4xl\">",{"type":15,"children":1117},[1118],{"text":1119,"type":19},"      Build modern websites faster",{"type":15,"children":1121},[1122],{"text":1123,"type":19},"    \u003C/h2>",{"type":15,"children":1125},[1126],{"text":1127,"type":19},"    \u003Cp class=\"mt-4 text-lg text-slate-600\">",{"type":15,"children":1129},[1130],{"text":1131,"type":19},"      Tailwind helps you move from idea to polished UI without wrestling your CSS for hours.",{"type":15,"children":1133},[1134],{"text":1027,"type":19},{"type":15,"children":1136},[1137],{"text":1055,"type":19},{"type":15,"children":1139},[1140],{"text":27,"type":19},{"type":15,"children":1142},[1143],{"text":1144,"type":19},"  \u003Cdiv class=\"mt-10 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">",{"type":15,"children":1146},[1147],{"text":1148,"type":19},"    \u003Carticle class=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\">",{"type":15,"children":1150},[1151],{"text":1152,"type":19},"      \u003Ch3 class=\"text-lg font-semibold text-slate-900\">Responsive by default\u003C/h3>",{"type":15,"children":1154},[1155],{"text":1156,"type":19},"      \u003Cp class=\"mt-3 text-slate-600\">Design mobile-first and scale up cleanly.\u003C/p>",{"type":15,"children":1158},[1159],{"text":1160,"type":19},"    \u003C/article>",{"type":15,"children":1162},[1163],{"text":1148,"type":19},{"type":15,"children":1165},[1166],{"text":1167,"type":19},"      \u003Ch3 class=\"text-lg font-semibold text-slate-900\">Fast to iterate\u003C/h3>",{"type":15,"children":1169},[1170],{"text":1171,"type":19},"      \u003Cp class=\"mt-3 text-slate-600\">Build layouts directly in your markup.\u003C/p>",{"type":15,"children":1173},[1174],{"text":1160,"type":19},{"type":15,"children":1176},[1177],{"text":1148,"type":19},{"type":15,"children":1179},[1180],{"text":1181,"type":19},"      \u003Ch3 class=\"text-lg font-semibold text-slate-900\">Consistent design\u003C/h3>",{"type":15,"children":1183},[1184],{"text":1185,"type":19},"      \u003Cp class=\"mt-3 text-slate-600\">Spacing and scale stay under control.\u003C/p>",{"type":15,"children":1187},[1188],{"text":1160,"type":19},{"type":15,"children":1190},[1191],{"text":1055,"type":19},{"type":15,"children":1193},[1194],{"text":1059,"type":19},{"type":15,"children":1196},[1197],{"text":132,"type":19},{"type":15,"children":1199},[1200],{"text":27,"type":19},{"type":15,"children":1202},[1203],{"text":1069,"type":19},{"type":15,"children":1205},[1206],{"text":1207,"type":19},"* grids",{"type":15,"children":1209},[1210],{"text":1211,"type":19},"* responsive columns",{"type":15,"children":1213},[1214],{"text":1215,"type":19},"* section hierarchy",{"type":15,"children":1217},[1218],{"text":1219,"type":19},"* clean card systems",{"type":15,"children":1221},[1222],{"text":27,"type":19},{"type":15,"children":1224},[1225],{"text":1226,"type":19},"## Practice 3 — Pricing section",{"type":15,"children":1228},[1229],{"text":289,"type":19},{"type":15,"children":1231},[1232],{"text":1233,"type":19},"\u003Csection class=\"bg-slate-950 px-6 py-20 text-white\">",{"type":15,"children":1235},[1236],{"text":1237,"type":19},"  \u003Cdiv class=\"mx-auto max-w-6xl\">",{"type":15,"children":1239},[1240],{"text":1241,"type":19},"    \u003Cdiv class=\"text-center\">",{"type":15,"children":1243},[1244],{"text":1245,"type":19},"      \u003Cp class=\"text-sm font-semibold text-indigo-400\">Pricing\u003C/p>",{"type":15,"children":1247},[1248],{"text":1249,"type":19},"      \u003Ch2 class=\"mt-2 text-3xl font-bold tracking-tight sm:text-4xl\">",{"type":15,"children":1251},[1252],{"text":1253,"type":19},"        Simple plans for modern projects",{"type":15,"children":1255},[1256],{"text":1257,"type":19},"      \u003C/h2>",{"type":15,"children":1259},[1260],{"text":1261,"type":19},"      \u003Cp class=\"mt-4 text-lg text-slate-300\">",{"type":15,"children":1263},[1264],{"text":1265,"type":19},"        Clean pricing cards are one of the best ways to practice hierarchy and spacing.",{"type":15,"children":1267},[1268],{"text":341,"type":19},{"type":15,"children":1270},[1271],{"text":1272,"type":19},"    \u003C/div>",{"type":15,"children":1274},[1275],{"text":27,"type":19},{"type":15,"children":1277},[1278],{"text":1279,"type":19},"    \u003Cdiv class=\"mt-12 grid gap-6 md:grid-cols-3\">",{"type":15,"children":1281},[1282],{"text":1283,"type":19},"      \u003Cdiv class=\"rounded-3xl border border-slate-800 bg-slate-900 p-8\">",{"type":15,"children":1285},[1286],{"text":1287,"type":19},"        \u003Ch3 class=\"text-xl font-semibold\">Starter\u003C/h3>",{"type":15,"children":1289},[1290],{"text":1291,"type":19},"        \u003Cp class=\"mt-4 text-4xl font-bold\">$0\u003C/p>",{"type":15,"children":1293},[1294],{"text":1295,"type":19},"        \u003Cp class=\"mt-3 text-slate-400\">Perfect for learning and small experiments.\u003C/p>",{"type":15,"children":1297},[1298],{"text":1299,"type":19},"      \u003C/div>",{"type":15,"children":1301},[1302],{"text":27,"type":19},{"type":15,"children":1304},[1305],{"text":1306,"type":19},"      \u003Cdiv class=\"rounded-3xl border border-indigo-500 bg-slate-900 p-8 shadow-lg shadow-indigo-500/10\">",{"type":15,"children":1308},[1309],{"text":1310,"type":19},"        \u003Ch3 class=\"text-xl font-semibold\">Pro\u003C/h3>",{"type":15,"children":1312},[1313],{"text":1314,"type":19},"        \u003Cp class=\"mt-4 text-4xl font-bold\">$19\u003C/p>",{"type":15,"children":1316},[1317],{"text":1318,"type":19},"        \u003Cp class=\"mt-3 text-slate-400\">For creators building polished public websites.\u003C/p>",{"type":15,"children":1320},[1321],{"text":1299,"type":19},{"type":15,"children":1323},[1324],{"text":27,"type":19},{"type":15,"children":1326},[1327],{"text":1283,"type":19},{"type":15,"children":1329},[1330],{"text":1331,"type":19},"        \u003Ch3 class=\"text-xl font-semibold\">Team\u003C/h3>",{"type":15,"children":1333},[1334],{"text":1335,"type":19},"        \u003Cp class=\"mt-4 text-4xl font-bold\">$49\u003C/p>",{"type":15,"children":1337},[1338],{"text":1339,"type":19},"        \u003Cp class=\"mt-3 text-slate-400\">For teams who want consistency at scale.\u003C/p>",{"type":15,"children":1341},[1342],{"text":1299,"type":19},{"type":15,"children":1344},[1345],{"text":1272,"type":19},{"type":15,"children":1347},[1348],{"text":1055,"type":19},{"type":15,"children":1350},[1351],{"text":1059,"type":19},{"type":15,"children":1353},[1354],{"text":132,"type":19},{"type":15,"children":1356},[1357],{"text":27,"type":19},{"type":15,"children":1359},[1360],{"text":1069,"type":19},{"type":15,"children":1362},[1363],{"text":1364,"type":19},"* dark surfaces",{"type":15,"children":1366},[1367],{"text":1368,"type":19},"* visual emphasis",{"type":15,"children":1370},[1371],{"text":1372,"type":19},"* card comparison layouts",{"type":15,"children":1374},[1375],{"text":1376,"type":19},"* section contrast",{"type":15,"children":1378},[1379],{"text":27,"type":19},{"type":15,"children":1381},[1382],{"text":1383,"type":19},"## Part 5 — Final project: full responsive landing page with only HTML + Tailwind 4",{"type":15,"children":1385},[1386],{"text":1387,"type":19},"This is your real milestone project.",{"type":15,"children":1389},[1390],{"text":27,"type":19},{"type":15,"children":1392},[1393],{"text":1394,"type":19},"### Goal",{"type":15,"children":1396},[1397],{"text":1398,"type":19},"Build a modern responsive landing page with:",{"type":15,"children":1400},[1401],{"text":1402,"type":19},"* navbar",{"type":15,"children":1404},[1405],{"text":1406,"type":19},"* hero",{"type":15,"children":1408},[1409],{"text":1410,"type":19},"* features",{"type":15,"children":1412},[1413],{"text":1414,"type":19},"* stats",{"type":15,"children":1416},[1417],{"text":1418,"type":19},"* testimonials",{"type":15,"children":1420},[1421],{"text":1422,"type":19},"* pricing",{"type":15,"children":1424},[1425],{"text":1426,"type":19},"* CTA",{"type":15,"children":1428},[1429],{"text":1430,"type":19},"* footer",{"type":15,"children":1432},[1433],{"text":27,"type":19},{"type":15,"children":1435},[1436],{"text":1437,"type":19},"### Full example",{"type":15,"children":1439},[1440],{"text":289,"type":19},{"type":15,"children":1442},[1443],{"text":293,"type":19},{"type":15,"children":1445},[1446],{"text":297,"type":19},{"type":15,"children":1448},[1449],{"text":301,"type":19},{"type":15,"children":1451},[1452],{"text":305,"type":19},{"type":15,"children":1454},[1455],{"text":309,"type":19},{"type":15,"children":1457},[1458],{"text":1459,"type":19},"    \u003Ctitle>Modern Tailwind 4 Landing Page\u003C/title>",{"type":15,"children":1461},[1462],{"text":317,"type":19},{"type":15,"children":1464},[1465],{"text":1466,"type":19},"  \u003Cbody class=\"bg-white text-slate-900\">",{"type":15,"children":1468},[1469],{"text":1470,"type":19},"    \u003Cheader class=\"border-b border-slate-200\">",{"type":15,"children":1472},[1473],{"text":1474,"type":19},"      \u003Cdiv class=\"mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8\">",{"type":15,"children":1476},[1477],{"text":1478,"type":19},"        \u003Ca href=\"#\" class=\"text-xl font-bold tracking-tight\">NovaUI\u003C/a>",{"type":15,"children":1480},[1481],{"text":1482,"type":19},"        \u003Cnav class=\"hidden gap-8 md:flex\">",{"type":15,"children":1484},[1485],{"text":1486,"type":19},"          \u003Ca href=\"#features\" class=\"text-sm font-medium text-slate-600 hover:text-slate-900\">Features\u003C/a>",{"type":15,"children":1488},[1489],{"text":1490,"type":19},"          \u003Ca href=\"#pricing\" class=\"text-sm font-medium text-slate-600 hover:text-slate-900\">Pricing\u003C/a>",{"type":15,"children":1492},[1493],{"text":1494,"type":19},"          \u003Ca href=\"#testimonials\" class=\"text-sm font-medium text-slate-600 hover:text-slate-900\">Testimonials\u003C/a>",{"type":15,"children":1496},[1497],{"text":1498,"type":19},"        \u003C/nav>",{"type":15,"children":1500},[1501],{"text":1502,"type":19},"        \u003Ca href=\"#\" class=\"rounded-xl bg-slate-900 px-4 py-2 text-sm font-semibold text-white hover:bg-slate-800\">",{"type":15,"children":1504},[1505],{"text":1506,"type":19},"          Get Started",{"type":15,"children":1508},[1509],{"text":1510,"type":19},"        \u003C/a>",{"type":15,"children":1512},[1513],{"text":1299,"type":19},{"type":15,"children":1515},[1516],{"text":1517,"type":19},"    \u003C/header>",{"type":15,"children":1519},[1520],{"text":27,"type":19},{"type":15,"children":1522},[1523],{"text":1524,"type":19},"    \u003Csection class=\"relative overflow-hidden\">",{"type":15,"children":1526},[1527],{"text":1528,"type":19},"      \u003Cdiv class=\"mx-auto grid max-w-7xl items-center gap-12 px-6 py-20 lg:grid-cols-2 lg:px-8 lg:py-28\">",{"type":15,"children":1530},[1531],{"text":1532,"type":19},"        \u003Cdiv>",{"type":15,"children":1534},[1535],{"text":1536,"type":19},"          \u003Cspan class=\"inline-flex rounded-full border border-slate-200 px-3 py-1 text-sm font-medium text-slate-600\">",{"type":15,"children":1538},[1539],{"text":1540,"type":19},"            Tailwind CSS 4 + HTML",{"type":15,"children":1542},[1543],{"text":1544,"type":19},"          \u003C/span>",{"type":15,"children":1546},[1547],{"text":1548,"type":19},"          \u003Ch1 class=\"mt-6 max-w-2xl text-4xl font-bold tracking-tight text-slate-900 sm:text-5xl lg:text-6xl\">",{"type":15,"children":1550},[1551],{"text":1552,"type":19},"            Build beautiful responsive websites with clean utility-first styling",{"type":15,"children":1554},[1555],{"text":1556,"type":19},"          \u003C/h1>",{"type":15,"children":1558},[1559],{"text":1560,"type":19},"          \u003Cp class=\"mt-6 max-w-xl text-lg leading-8 text-slate-600\">",{"type":15,"children":1562},[1563],{"text":1564,"type":19},"            Learn Tailwind CSS 4 from scratch and create elegant landing pages, polished sections, and modern responsive layouts.",{"type":15,"children":1566},[1567],{"text":1568,"type":19},"          \u003C/p>",{"type":15,"children":1570},[1571],{"text":1572,"type":19},"          \u003Cdiv class=\"mt-8 flex flex-col gap-4 sm:flex-row\">",{"type":15,"children":1574},[1575],{"text":1576,"type":19},"            \u003Ca href=\"#\" class=\"inline-flex items-center justify-center rounded-xl bg-slate-900 px-5 py-3 text-sm font-semibold text-white hover:bg-slate-800\">",{"type":15,"children":1578},[1579],{"text":1580,"type":19},"              Start Learning",{"type":15,"children":1582},[1583],{"text":1584,"type":19},"            \u003C/a>",{"type":15,"children":1586},[1587],{"text":1588,"type":19},"            \u003Ca href=\"#features\" class=\"inline-flex items-center justify-center rounded-xl border border-slate-300 px-5 py-3 text-sm font-semibold text-slate-700 hover:bg-slate-50\">",{"type":15,"children":1590},[1591],{"text":1592,"type":19},"              Explore Sections",{"type":15,"children":1594},[1595],{"text":1584,"type":19},{"type":15,"children":1597},[1598],{"text":1599,"type":19},"          \u003C/div>",{"type":15,"children":1601},[1602],{"text":1603,"type":19},"        \u003C/div>",{"type":15,"children":1605},[1606],{"text":27,"type":19},{"type":15,"children":1608},[1609],{"text":1610,"type":19},"        \u003Cdiv class=\"rounded-3xl border border-slate-200 bg-slate-50 p-6 shadow-sm sm:p-8\">",{"type":15,"children":1612},[1613],{"text":1614,"type":19},"          \u003Cdiv class=\"grid gap-4\">",{"type":15,"children":1616},[1617],{"text":1618,"type":19},"            \u003Cdiv class=\"rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200\">",{"type":15,"children":1620},[1621],{"text":1622,"type":19},"              \u003Cp class=\"text-sm font-medium text-slate-500\">Performance\u003C/p>",{"type":15,"children":1624},[1625],{"text":1626,"type":19},"              \u003Cp class=\"mt-2 text-2xl font-bold text-slate-900\">Fast, clean UI foundations\u003C/p>",{"type":15,"children":1628},[1629],{"text":1630,"type":19},"            \u003C/div>",{"type":15,"children":1632},[1633],{"text":1634,"type":19},"            \u003Cdiv class=\"grid gap-4 sm:grid-cols-2\">",{"type":15,"children":1636},[1637],{"text":1638,"type":19},"              \u003Cdiv class=\"rounded-2xl bg-white p-5 shadow-sm ring-1 ring-slate-200\">",{"type":15,"children":1640},[1641],{"text":1642,"type":19},"                \u003Cp class=\"text-sm font-medium text-slate-500\">Responsive\u003C/p>",{"type":15,"children":1644},[1645],{"text":1646,"type":19},"                \u003Cp class=\"mt-2 text-lg font-semibold text-slate-900\">Mobile first\u003C/p>",{"type":15,"children":1648},[1649],{"text":1650,"type":19},"              \u003C/div>",{"type":15,"children":1652},[1653],{"text":1638,"type":19},{"type":15,"children":1655},[1656],{"text":1657,"type":19},"                \u003Cp class=\"text-sm font-medium text-slate-500\">Design\u003C/p>",{"type":15,"children":1659},[1660],{"text":1661,"type":19},"                \u003Cp class=\"mt-2 text-lg font-semibold text-slate-900\">Modern layouts\u003C/p>",{"type":15,"children":1663},[1664],{"text":1650,"type":19},{"type":15,"children":1666},[1667],{"text":1630,"type":19},{"type":15,"children":1669},[1670],{"text":1671,"type":19},"            \u003Cdiv class=\"rounded-2xl bg-slate-900 p-6 text-white\">",{"type":15,"children":1673},[1674],{"text":1675,"type":19},"              \u003Cp class=\"text-sm font-medium text-slate-300\">Goal\u003C/p>",{"type":15,"children":1677},[1678],{"text":1679,"type":19},"              \u003Cp class=\"mt-2 text-xl font-semibold\">Pages that actually look premium\u003C/p>",{"type":15,"children":1681},[1682],{"text":1630,"type":19},{"type":15,"children":1684},[1685],{"text":1599,"type":19},{"type":15,"children":1687},[1688],{"text":1603,"type":19},{"type":15,"children":1690},[1691],{"text":1299,"type":19},{"type":15,"children":1693},[1694],{"text":1695,"type":19},"    \u003C/section>",{"type":15,"children":1697},[1698],{"text":27,"type":19},{"type":15,"children":1700},[1701],{"text":1702,"type":19},"    \u003Csection id=\"features\" class=\"px-6 py-20 lg:px-8\">",{"type":15,"children":1704},[1705],{"text":1706,"type":19},"      \u003Cdiv class=\"mx-auto max-w-7xl\">",{"type":15,"children":1708},[1709],{"text":1710,"type":19},"        \u003Cdiv class=\"max-w-2xl\">",{"type":15,"children":1712},[1713],{"text":1714,"type":19},"          \u003Cp class=\"text-sm font-semibold text-indigo-600\">Features\u003C/p>",{"type":15,"children":1716},[1717],{"text":1718,"type":19},"          \u003Ch2 class=\"mt-2 text-3xl font-bold tracking-tight sm:text-4xl\">",{"type":15,"children":1720},[1721],{"text":1722,"type":19},"            A workflow that feels structured, not chaotic",{"type":15,"children":1724},[1725],{"text":1726,"type":19},"          \u003C/h2>",{"type":15,"children":1728},[1729],{"text":1730,"type":19},"          \u003Cp class=\"mt-4 text-lg text-slate-600\">",{"type":15,"children":1732},[1733],{"text":1734,"type":19},"            Tailwind helps you move faster while keeping spacing, hierarchy, and responsiveness under control.",{"type":15,"children":1736},[1737],{"text":1568,"type":19},{"type":15,"children":1739},[1740],{"text":1603,"type":19},{"type":15,"children":1742},[1743],{"text":27,"type":19},{"type":15,"children":1745},[1746],{"text":1747,"type":19},"        \u003Cdiv class=\"mt-12 grid gap-6 md:grid-cols-2 lg:grid-cols-3\">",{"type":15,"children":1749},[1750],{"text":1751,"type":19},"          \u003Carticle class=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\">",{"type":15,"children":1753},[1754],{"text":1755,"type":19},"            \u003Ch3 class=\"text-lg font-semibold\">Utility-first styling\u003C/h3>",{"type":15,"children":1757},[1758],{"text":1759,"type":19},"            \u003Cp class=\"mt-3 text-slate-600\">Compose directly in HTML without a swamp of custom CSS.\u003C/p>",{"type":15,"children":1761},[1762],{"text":1763,"type":19},"          \u003C/article>",{"type":15,"children":1765},[1766],{"text":1751,"type":19},{"type":15,"children":1768},[1769],{"text":1770,"type":19},"            \u003Ch3 class=\"text-lg font-semibold\">Responsive design\u003C/h3>",{"type":15,"children":1772},[1773],{"text":1774,"type":19},"            \u003Cp class=\"mt-3 text-slate-600\">Use breakpoint variants to adapt layouts cleanly.\u003C/p>",{"type":15,"children":1776},[1777],{"text":1763,"type":19},{"type":15,"children":1779},[1780],{"text":1751,"type":19},{"type":15,"children":1782},[1783],{"text":1784,"type":19},"            \u003Ch3 class=\"text-lg font-semibold\">Modern theming\u003C/h3>",{"type":15,"children":1786},[1787],{"text":1788,"type":19},"            \u003Cp class=\"mt-3 text-slate-600\">Use design tokens in Tailwind 4 with CSS-first theming.\u003C/p>",{"type":15,"children":1790},[1791],{"text":1763,"type":19},{"type":15,"children":1793},[1794],{"text":1603,"type":19},{"type":15,"children":1796},[1797],{"text":1299,"type":19},{"type":15,"children":1799},[1800],{"text":1695,"type":19},{"type":15,"children":1802},[1803],{"text":27,"type":19},{"type":15,"children":1805},[1806],{"text":1807,"type":19},"    \u003Csection class=\"bg-slate-50 px-6 py-20 lg:px-8\">",{"type":15,"children":1809},[1810],{"text":1811,"type":19},"      \u003Cdiv class=\"mx-auto grid max-w-7xl gap-6 md:grid-cols-3\">",{"type":15,"children":1813},[1814],{"text":1815,"type":19},"        \u003Cdiv class=\"rounded-3xl bg-white p-8 shadow-sm\">",{"type":15,"children":1817},[1818],{"text":1819,"type":19},"          \u003Cp class=\"text-sm text-slate-500\">Projects built\u003C/p>",{"type":15,"children":1821},[1822],{"text":1823,"type":19},"          \u003Cp class=\"mt-3 text-4xl font-bold\">24K+\u003C/p>",{"type":15,"children":1825},[1826],{"text":1603,"type":19},{"type":15,"children":1828},[1829],{"text":1815,"type":19},{"type":15,"children":1831},[1832],{"text":1833,"type":19},"          \u003Cp class=\"text-sm text-slate-500\">Average load impact\u003C/p>",{"type":15,"children":1835},[1836],{"text":1837,"type":19},"          \u003Cp class=\"mt-3 text-4xl font-bold\">Low\u003C/p>",{"type":15,"children":1839},[1840],{"text":1603,"type":19},{"type":15,"children":1842},[1843],{"text":1815,"type":19},{"type":15,"children":1845},[1846],{"text":1847,"type":19},"          \u003Cp class=\"text-sm text-slate-500\">Developer happiness\u003C/p>",{"type":15,"children":1849},[1850],{"text":1851,"type":19},"          \u003Cp class=\"mt-3 text-4xl font-bold\">Very real\u003C/p>",{"type":15,"children":1853},[1854],{"text":1603,"type":19},{"type":15,"children":1856},[1857],{"text":1299,"type":19},{"type":15,"children":1859},[1860],{"text":1695,"type":19},{"type":15,"children":1862},[1863],{"text":27,"type":19},{"type":15,"children":1865},[1866],{"text":1867,"type":19},"    \u003Csection id=\"testimonials\" class=\"px-6 py-20 lg:px-8\">",{"type":15,"children":1869},[1870],{"text":1706,"type":19},{"type":15,"children":1872},[1873],{"text":1874,"type":19},"        \u003Cdiv class=\"text-center\">",{"type":15,"children":1876},[1877],{"text":1878,"type":19},"          \u003Cp class=\"text-sm font-semibold text-indigo-600\">Testimonials\u003C/p>",{"type":15,"children":1880},[1881],{"text":1718,"type":19},{"type":15,"children":1883},[1884],{"text":1885,"type":19},"            Teams love clean interfaces",{"type":15,"children":1887},[1888],{"text":1726,"type":19},{"type":15,"children":1890},[1891],{"text":1603,"type":19},{"type":15,"children":1893},[1894],{"text":27,"type":19},{"type":15,"children":1896},[1897],{"text":1747,"type":19},{"type":15,"children":1899},[1900],{"text":1901,"type":19},"          \u003Cblockquote class=\"rounded-2xl border border-slate-200 bg-white p-6 shadow-sm\">",{"type":15,"children":1903},[1904],{"text":1905,"type":19},"            \u003Cp class=\"text-slate-600\">“Tailwind made our marketing pages faster to build and easier to keep consistent.”\u003C/p>",{"type":15,"children":1907},[1908],{"text":1909,"type":19},"            \u003Cfooter class=\"mt-4 text-sm font-semibold text-slate-900\">— Product Team\u003C/footer>",{"type":15,"children":1911},[1912],{"text":1913,"type":19},"          \u003C/blockquote>",{"type":15,"children":1915},[1916],{"text":1901,"type":19},{"type":15,"children":1918},[1919],{"text":1920,"type":19},"            \u003Cp class=\"text-slate-600\">“The responsive workflow is ridiculously practical once you stop overthinking it.”\u003C/p>",{"type":15,"children":1922},[1923],{"text":1924,"type":19},"            \u003Cfooter class=\"mt-4 text-sm font-semibold text-slate-900\">— UI Engineer\u003C/footer>",{"type":15,"children":1926},[1927],{"text":1913,"type":19},{"type":15,"children":1929},[1930],{"text":1901,"type":19},{"type":15,"children":1932},[1933],{"text":1934,"type":19},"            \u003Cp class=\"text-slate-600\">“We replaced a pile of inconsistent CSS with a cleaner system.”\u003C/p>",{"type":15,"children":1936},[1937],{"text":1938,"type":19},"            \u003Cfooter class=\"mt-4 text-sm font-semibold text-slate-900\">— Frontend Lead\u003C/footer>",{"type":15,"children":1940},[1941],{"text":1913,"type":19},{"type":15,"children":1943},[1944],{"text":1603,"type":19},{"type":15,"children":1946},[1947],{"text":1299,"type":19},{"type":15,"children":1949},[1950],{"text":1695,"type":19},{"type":15,"children":1952},[1953],{"text":27,"type":19},{"type":15,"children":1955},[1956],{"text":1957,"type":19},"    \u003Csection id=\"pricing\" class=\"bg-slate-950 px-6 py-20 text-white lg:px-8\">",{"type":15,"children":1959},[1960],{"text":1706,"type":19},{"type":15,"children":1962},[1963],{"text":1874,"type":19},{"type":15,"children":1965},[1966],{"text":1967,"type":19},"          \u003Cp class=\"text-sm font-semibold text-indigo-400\">Pricing\u003C/p>",{"type":15,"children":1969},[1970],{"text":1718,"type":19},{"type":15,"children":1972},[1973],{"text":1974,"type":19},"            Pick the plan that fits your pace",{"type":15,"children":1976},[1977],{"text":1726,"type":19},{"type":15,"children":1979},[1980],{"text":1981,"type":19},"          \u003Cp class=\"mt-4 text-lg text-slate-300\">",{"type":15,"children":1983},[1984],{"text":1985,"type":19},"            A strong pricing section teaches hierarchy, contrast, and responsive card design.",{"type":15,"children":1987},[1988],{"text":1568,"type":19},{"type":15,"children":1990},[1991],{"text":1603,"type":19},{"type":15,"children":1993},[1994],{"text":27,"type":19},{"type":15,"children":1996},[1997],{"text":1998,"type":19},"        \u003Cdiv class=\"mt-12 grid gap-6 md:grid-cols-3\">",{"type":15,"children":2000},[2001],{"text":2002,"type":19},"          \u003Cdiv class=\"rounded-3xl border border-slate-800 bg-slate-900 p-8\">",{"type":15,"children":2004},[2005],{"text":2006,"type":19},"            \u003Ch3 class=\"text-xl font-semibold\">Starter\u003C/h3>",{"type":15,"children":2008},[2009],{"text":2010,"type":19},"            \u003Cp class=\"mt-4 text-4xl font-bold\">$0\u003C/p>",{"type":15,"children":2012},[2013],{"text":2014,"type":19},"            \u003Cp class=\"mt-3 text-slate-400\">Perfect for learning and small projects.\u003C/p>",{"type":15,"children":2016},[2017],{"text":1599,"type":19},{"type":15,"children":2019},[2020],{"text":2021,"type":19},"          \u003Cdiv class=\"rounded-3xl border border-indigo-500 bg-slate-900 p-8 shadow-lg shadow-indigo-500/10\">",{"type":15,"children":2023},[2024],{"text":2025,"type":19},"            \u003Ch3 class=\"text-xl font-semibold\">Pro\u003C/h3>",{"type":15,"children":2027},[2028],{"text":2029,"type":19},"            \u003Cp class=\"mt-4 text-4xl font-bold\">$19\u003C/p>",{"type":15,"children":2031},[2032],{"text":2033,"type":19},"            \u003Cp class=\"mt-3 text-slate-400\">For polished sites with serious visual structure.\u003C/p>",{"type":15,"children":2035},[2036],{"text":1599,"type":19},{"type":15,"children":2038},[2039],{"text":2002,"type":19},{"type":15,"children":2041},[2042],{"text":2043,"type":19},"            \u003Ch3 class=\"text-xl font-semibold\">Team\u003C/h3>",{"type":15,"children":2045},[2046],{"text":2047,"type":19},"            \u003Cp class=\"mt-4 text-4xl font-bold\">$49\u003C/p>",{"type":15,"children":2049},[2050],{"text":2051,"type":19},"            \u003Cp class=\"mt-3 text-slate-400\">For teams building modern product websites.\u003C/p>",{"type":15,"children":2053},[2054],{"text":1599,"type":19},{"type":15,"children":2056},[2057],{"text":1603,"type":19},{"type":15,"children":2059},[2060],{"text":1299,"type":19},{"type":15,"children":2062},[2063],{"text":1695,"type":19},{"type":15,"children":2065},[2066],{"text":27,"type":19},{"type":15,"children":2068},[2069],{"text":2070,"type":19},"    \u003Csection class=\"px-6 py-20 lg:px-8\">",{"type":15,"children":2072},[2073],{"text":2074,"type":19},"      \u003Cdiv class=\"mx-auto max-w-5xl rounded-3xl bg-indigo-600 px-8 py-14 text-center text-white\">",{"type":15,"children":2076},[2077],{"text":2078,"type":19},"        \u003Ch2 class=\"text-3xl font-bold tracking-tight sm:text-4xl\">",{"type":15,"children":2080},[2081],{"text":2082,"type":19},"          Start building cleaner interfaces today",{"type":15,"children":2084},[2085],{"text":2086,"type":19},"        \u003C/h2>",{"type":15,"children":2088},[2089],{"text":2090,"type":19},"        \u003Cp class=\"mx-auto mt-4 max-w-2xl text-lg text-indigo-100\">",{"type":15,"children":2092},[2093],{"text":2094,"type":19},"          Learn Tailwind CSS 4 step by step and turn raw HTML into modern, responsive design.",{"type":15,"children":2096},[2097],{"text":2098,"type":19},"        \u003C/p>",{"type":15,"children":2100},[2101],{"text":2102,"type":19},"        \u003Ca href=\"#\" class=\"mt-8 inline-flex rounded-xl bg-white px-5 py-3 text-sm font-semibold text-indigo-700 hover:bg-indigo-50\">",{"type":15,"children":2104},[2105],{"text":2106,"type":19},"          Start Now",{"type":15,"children":2108},[2109],{"text":1510,"type":19},{"type":15,"children":2111},[2112],{"text":1299,"type":19},{"type":15,"children":2114},[2115],{"text":1695,"type":19},{"type":15,"children":2117},[2118],{"text":27,"type":19},{"type":15,"children":2120},[2121],{"text":2122,"type":19},"    \u003Cfooter class=\"border-t border-slate-200 px-6 py-10 lg:px-8\">",{"type":15,"children":2124},[2125],{"text":2126,"type":19},"      \u003Cdiv class=\"mx-auto flex max-w-7xl flex-col gap-4 md:flex-row md:items-center md:justify-between\">",{"type":15,"children":2128},[2129],{"text":2130,"type":19},"        \u003Cp class=\"text-sm text-slate-500\">© 2026 NovaUI. Built with Tailwind CSS 4.\u003C/p>",{"type":15,"children":2132},[2133],{"text":2134,"type":19},"        \u003Cdiv class=\"flex gap-6 text-sm text-slate-500\">",{"type":15,"children":2136},[2137],{"text":2138,"type":19},"          \u003Ca href=\"#\" class=\"hover:text-slate-900\">Privacy\u003C/a>",{"type":15,"children":2140},[2141],{"text":2142,"type":19},"          \u003Ca href=\"#\" class=\"hover:text-slate-900\">Terms\u003C/a>",{"type":15,"children":2144},[2145],{"text":2146,"type":19},"          \u003Ca href=\"#\" class=\"hover:text-slate-900\">Contact\u003C/a>",{"type":15,"children":2148},[2149],{"text":1603,"type":19},{"type":15,"children":2151},[2152],{"text":1299,"type":19},{"type":15,"children":2154},[2155],{"text":2156,"type":19},"    \u003C/footer>",{"type":15,"children":2158},[2159],{"text":27,"type":19},{"type":15,"children":2161},[2162],{"text":349,"type":19},{"type":15,"children":2164},[2165],{"text":353,"type":19},{"type":15,"children":2167},[2168],{"text":357,"type":19},{"type":15,"children":2170},[2171],{"text":132,"type":19},{"type":15,"children":2173},[2174],{"text":27,"type":19},{"type":15,"children":2176},[2177],{"text":2178,"type":19},"## Part 6 — What this final project teaches",{"type":15,"children":2180},[2181],{"text":2182,"type":19},"This single page gives you practice in:",{"type":15,"children":2184},[2185],{"text":2186,"type":19},"* layout composition",{"type":15,"children":2188},[2189],{"text":2190,"type":19},"* responsive grid systems",{"type":15,"children":2192},[2193],{"text":2194,"type":19},"* typography hierarchy",{"type":15,"children":2196},[2197],{"text":2198,"type":19},"* contrast",{"type":15,"children":2200},[2201],{"text":2202,"type":19},"* cards",{"type":15,"children":2204},[2205],{"text":2206,"type":19},"* CTA design",{"type":15,"children":2208},[2209],{"text":2210,"type":19},"* dark section styling",{"type":15,"children":2212},[2213],{"text":2214,"type":19},"* header and footer structure",{"type":15,"children":2216},[2217],{"text":2218,"type":19},"* section spacing",{"type":15,"children":2220},[2221],{"text":2222,"type":19},"* modern landing page rhythm",{"type":15,"children":2224},[2225],{"text":27,"type":19},{"type":15,"children":2227},[2228],{"text":2229,"type":19},"That is already enough to build real websites, not just toy snippets.",{"type":15,"children":2231},[2232],{"text":27,"type":19},{"type":15,"children":2234},[2235],{"text":2236,"type":19},"## Part 7 — Suggested learning schedule",{"type":15,"children":2238},[2239],{"text":2240,"type":19},"### Week 1",{"type":15,"children":2242},[2243],{"text":2244,"type":19},"Install Tailwind with Vite and learn utility-first basics: spacing, color, typography, radius, shadow. Tailwind’s v4 install with Vite and CSS import is the recommended modern path. ([tailwindcss.com][1])",{"type":15,"children":2246},[2247],{"text":27,"type":19},{"type":15,"children":2249},[2250],{"text":2251,"type":19},"### Week 2",{"type":15,"children":2253},[2254],{"text":2255,"type":19},"Practice layout with flex, grid, width, alignment, and containers.",{"type":15,"children":2257},[2258],{"text":27,"type":19},{"type":15,"children":2260},[2261],{"text":2262,"type":19},"### Week 3",{"type":15,"children":2264},[2265],{"text":2266,"type":19},"Focus on responsive design using breakpoint variants like `md:` and `lg:`. Tailwind’s responsive docs define this as a core concept. ([tailwindcss.com][4])",{"type":15,"children":2268},[2269],{"text":27,"type":19},{"type":15,"children":2271},[2272],{"text":2273,"type":19},"### Week 4",{"type":15,"children":2275},[2276],{"text":2277,"type":19},"Work on hierarchy: hero sections, cards, feature grids, and pricing layouts.",{"type":15,"children":2279},[2280],{"text":27,"type":19},{"type":15,"children":2282},[2283],{"text":2284,"type":19},"### Week 5",{"type":15,"children":2286},[2287],{"text":2288,"type":19},"Learn dark mode and design tokens with `@theme`. Both are first-class concepts in the official docs. ([tailwindcss.com][7])",{"type":15,"children":2290},[2291],{"text":27,"type":19},{"type":15,"children":2293},[2294],{"text":2295,"type":19},"### Week 6",{"type":15,"children":2297},[2298],{"text":2299,"type":19},"Build the full landing page and then rebuild it from memory with your own brand style.",{"type":15,"children":2301},[2302],{"text":2303,"type":19},"That last part matters. Copy once, then rebuild. That is where the hands actually learn.",{"type":15,"children":2305},[2306],{"text":27,"type":19},{"type":15,"children":2308},[2309],{"text":2310,"type":19},"## Part 8 — Common mistakes to avoid",{"type":15,"children":2312},[2313],{"text":2314,"type":19},"* Learning from v3 tutorials and copying outdated config",{"type":15,"children":2316},[2317],{"text":2318,"type":19},"* Using random spacing values with no rhythm",{"type":15,"children":2320},[2321],{"text":2322,"type":19},"* Overloading pages with too many shadows and colors",{"type":15,"children":2324},[2325],{"text":2326,"type":19},"* Designing desktop first and then trying to squeeze it into mobile",{"type":15,"children":2328},[2329],{"text":2330,"type":19},"* Writing class soup without section structure",{"type":15,"children":2332},[2333],{"text":2334,"type":19},"* Making everything “fancy” instead of making it readable",{"type":15,"children":2336},[2337],{"text":2338,"type":19},"Tailwind does not make bad design decisions for you. It just lets you make them faster if you are reckless. Beautifully efficient chaos.",{"type":15,"children":2340},[2341],{"text":27,"type":19},{"type":15,"children":2343},[2344],{"text":2345,"type":19},"## Part 9 — Official concepts you should study next",{"type":15,"children":2347},[2348],{"text":2349,"type":19},"After this roadmap, the most important official Tailwind pages to review are:",{"type":15,"children":2351},[2352],{"text":2353,"type":19},"* installation with Vite, ([tailwindcss.com][1])",{"type":15,"children":2355},[2356],{"text":2357,"type":19},"* responsive design, ([tailwindcss.com][4])",{"type":15,"children":2359},[2360],{"text":2361,"type":19},"* theme variables, ([tailwindcss.com][7])",{"type":15,"children":2363},[2364],{"text":2365,"type":19},"* utility-first styling, ([tailwindcss.com][5])",{"type":15,"children":2367},[2368],{"text":2369,"type":19},"* dark mode, ([tailwindcss.com][6])",{"type":15,"children":2371},[2372],{"text":2373,"type":19},"* and the v4 release notes / upgrade guide so you do not inherit old setup habits. ([tailwindcss.com][3])",{"type":15,"children":2375},[2376],{"text":27,"type":19},{"type":15,"children":2378},[2379],{"text":2380,"type":19},"## Final take",{"type":15,"children":2382},[2383],{"text":2384,"type":19},"The best order to learn Tailwind CSS 4 is:",{"type":15,"children":2386},[2387],{"text":2388,"type":19},"**installation → utilities → spacing → layout → typography → colors → responsive design → components → theming → full page composition**",{"type":15,"children":2390},[2391],{"text":2392,"type":19},"That order works because good design is not random. First structure. Then rhythm. Then clarity. Then polish.",{"type":15,"children":2394},[2395],{"text":27,"type":19},{"type":15,"children":2397},[2398],{"text":2399,"type":19},"[1]: https://tailwindcss.com/docs \"Installing Tailwind CSS with Vite\"",{"type":15,"children":2401},[2402],{"text":2403,"type":19},"[2]: https://tailwindcss.com/ \"Tailwind CSS - Rapidly build modern websites without ever ...\"",{"type":15,"children":2405},[2406],{"text":2407,"type":19},"[3]: https://tailwindcss.com/blog/tailwindcss-v4 \"Tailwind CSS v4.0\"",{"type":15,"children":2409},[2410],{"text":2411,"type":19},"[4]: https://tailwindcss.com/docs/responsive-design \"Responsive design - Core concepts\"",{"type":15,"children":2413},[2414],{"text":2415,"type":19},"[5]: https://tailwindcss.com/docs/styling-with-utility-classes \"Styling with utility classes - Core concepts\"",{"type":15,"children":2417},[2418],{"text":2419,"type":19},"[6]: https://tailwindcss.com/docs/dark-mode \"Dark mode - Core concepts\"",{"type":15,"children":2421},[2422],{"text":2423,"type":19},"[7]: https://tailwindcss.com/docs/theme \"Theme variables - Core concepts\"","2026-03-16T03:22:54.859Z","2026-03-16T03:22:55.208Z",{"id":2427,"documentId":2428,"name":2429,"alternativeText":2430,"caption":2430,"focalPoint":2430,"width":2431,"height":2432,"formats":2433,"hash":2467,"ext":2435,"mime":2438,"size":2468,"url":2469,"previewUrl":2430,"provider":2470,"provider_metadata":2430,"createdAt":2471,"updatedAt":2471,"publishedAt":2471},15,"s7co1b0xgosc9l4x8irypu6m","tailwindcss-4-roadmap.png",null,1536,1024,{"large":2434,"small":2444,"medium":2452,"thumbnail":2459},{"ext":2435,"url":2436,"hash":2437,"mime":2438,"name":2439,"path":2430,"size":2440,"width":2441,"height":2442,"sizeInBytes":2443},".png","https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_tailwindcss_4_roadmap_959ad7da08.png","large_tailwindcss_4_roadmap_959ad7da08","image/png","large_tailwindcss-4-roadmap.png",1205.7,1000,667,1205696,{"ext":2435,"url":2445,"hash":2446,"mime":2438,"name":2447,"path":2430,"size":2448,"width":2449,"height":2450,"sizeInBytes":2451},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_tailwindcss_4_roadmap_959ad7da08.png","small_tailwindcss_4_roadmap_959ad7da08","small_tailwindcss-4-roadmap.png",303.09,500,333,303089,{"ext":2435,"url":2453,"hash":2454,"mime":2438,"name":2455,"path":2430,"size":2456,"width":2457,"height":2449,"sizeInBytes":2458},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_tailwindcss_4_roadmap_959ad7da08.png","medium_tailwindcss_4_roadmap_959ad7da08","medium_tailwindcss-4-roadmap.png",675.39,750,675394,{"ext":2435,"url":2460,"hash":2461,"mime":2438,"name":2462,"path":2430,"size":2463,"width":2464,"height":2465,"sizeInBytes":2466},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_tailwindcss_4_roadmap_959ad7da08.png","thumbnail_tailwindcss_4_roadmap_959ad7da08","thumbnail_tailwindcss-4-roadmap.png",72.66,234,156,72663,"tailwindcss_4_roadmap_959ad7da08",833.49,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/tailwindcss_4_roadmap_959ad7da08.png","strapi-provider-upload-strapi-cloud","2026-03-16T03:21:21.215Z",{"id":2473,"documentId":2474,"name":2475,"slug":2476,"bio":2477,"createdAt":2478,"updatedAt":2478,"publishedAt":2479},1,"v47xc4w0scmvr4q884stes9o","Jose Henriquez","author","Desarrollador de software y estudiante de Ingeniería en Sistemas, apasionado por la tecnología, la creación de soluciones digitales y la construcción de proyectos con impacto real. Se caracteriza por ser una persona autodidacta, creativa y enfocada en convertir ideas en resultados concretos.","2026-03-08T18:07:58.711Z","2026-03-08T18:07:58.660Z",[2481,2533,2579],{"id":2482,"documentId":2483,"title":2484,"slug":2485,"excerpt":2486,"difficulty":11,"estimatedCost":2487,"seoTitle":2488,"seoDescription":2489,"createdAt":2490,"updatedAt":2490,"publishedAt":2491,"maturity":2492,"coverImage":2493},11,"mtna95wmkqzsahxvrwl7rc1r","Astro + Tailwind CSS for Modern Landing Pages","astro-tailwind-css-for-modern-landing-pages","A beginner-friendly stack for building fast, modern, and visually polished landing pages with strong performance and clean frontend architecture.","Astro: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider  Optional extras: domain, analytics, forms, email services","Astro + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use Astro with Tailwind CSS for landing pages, product websites, startup pages, personal brands, and modern marketing sites.","2026-03-10T03:06:06.022Z","2026-03-10T03:06:06.300Z","stable",{"id":2494,"documentId":2495,"name":2496,"alternativeText":2430,"caption":2430,"focalPoint":2430,"width":2497,"height":2498,"formats":2499,"hash":2529,"ext":2435,"mime":2438,"size":2530,"url":2531,"previewUrl":2430,"provider":2470,"provider_metadata":2430,"createdAt":2532,"updatedAt":2532,"publishedAt":2532},6,"ap2d2wcmasourkoh3f5l0wyi","cover-astro-tailwind-css-modern-landing-pages.png",1857,949,{"large":2500,"small":2507,"medium":2514,"thumbnail":2521},{"ext":2435,"url":2501,"hash":2502,"mime":2438,"name":2503,"path":2430,"size":2504,"width":2441,"height":2505,"sizeInBytes":2506},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","large_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","large_cover-astro-tailwind-css-modern-landing-pages.png",578.15,511,578145,{"ext":2435,"url":2508,"hash":2509,"mime":2438,"name":2510,"path":2430,"size":2511,"width":2449,"height":2512,"sizeInBytes":2513},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","small_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","small_cover-astro-tailwind-css-modern-landing-pages.png",134.93,256,134925,{"ext":2435,"url":2515,"hash":2516,"mime":2438,"name":2517,"path":2430,"size":2518,"width":2457,"height":2519,"sizeInBytes":2520},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","medium_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","medium_cover-astro-tailwind-css-modern-landing-pages.png",304.81,383,304810,{"ext":2435,"url":2522,"hash":2523,"mime":2438,"name":2524,"path":2430,"size":2525,"width":2526,"height":2527,"sizeInBytes":2528},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","thumbnail_cover_astro_tailwind_css_modern_landing_pages_23162e0a23","thumbnail_cover-astro-tailwind-css-modern-landing-pages.png",43.63,245,125,43634,"cover_astro_tailwind_css_modern_landing_pages_23162e0a23",336.08,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/cover_astro_tailwind_css_modern_landing_pages_23162e0a23.png","2026-03-10T03:05:54.962Z",{"id":2534,"documentId":2535,"title":2536,"slug":2537,"excerpt":2538,"difficulty":11,"estimatedCost":2539,"seoTitle":2540,"seoDescription":2541,"createdAt":2542,"updatedAt":2543,"publishedAt":2544,"maturity":2492,"coverImage":2545},9,"yxti6jbq6ufd0biu3fx6ffpw","Astro with Content Collections  + Tailwind 4 + shadcn","astro-tailwind-css-v4-shadcn-ui-content-collections","A modern portfolio stack for developers, designers, and creators who want a fast personal website, polished project showcases, reusable UI components, and structured content without relying on a full CMS.","Astro free, Tailwind CSS free, shadcn/ui free, Content Collections built into Astro workflows, hosting low depending on provider.","Astro + Tailwind CSS v4 + shadcn/ui + Content Collections Stack Guide for Modern Portfolios","Learn when to use Astro with Tailwind CSS v4, shadcn/ui, and Content Collections for personal portfolios, developer websites, project showcases, and technical blogs.","2026-03-10T02:11:55.871Z","2026-03-10T02:31:48.345Z","2026-03-10T02:31:48.749Z",{"id":2546,"documentId":2547,"name":2548,"alternativeText":2430,"caption":2430,"focalPoint":2430,"width":2431,"height":2432,"formats":2549,"hash":2574,"ext":2435,"mime":2438,"size":2575,"url":2576,"previewUrl":2430,"provider":2470,"provider_metadata":2430,"createdAt":2577,"updatedAt":2577,"publishedAt":2578},5,"mekbtcfjrui3pj6ixju8k812","astro-content-collection-portfolio-development.png",{"large":2550,"small":2556,"medium":2562,"thumbnail":2568},{"ext":2435,"url":2551,"hash":2552,"mime":2438,"name":2553,"path":2430,"size":2554,"width":2441,"height":2442,"sizeInBytes":2555},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_astro_content_collection_portfolio_development_e57d75f3ad.png","large_astro_content_collection_portfolio_development_e57d75f3ad","large_astro-content-collection-portfolio-development.png",435.15,435147,{"ext":2435,"url":2557,"hash":2558,"mime":2438,"name":2559,"path":2430,"size":2560,"width":2449,"height":2450,"sizeInBytes":2561},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_astro_content_collection_portfolio_development_e57d75f3ad.png","small_astro_content_collection_portfolio_development_e57d75f3ad","small_astro-content-collection-portfolio-development.png",111.67,111674,{"ext":2435,"url":2563,"hash":2564,"mime":2438,"name":2565,"path":2430,"size":2566,"width":2457,"height":2449,"sizeInBytes":2567},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_astro_content_collection_portfolio_development_e57d75f3ad.png","medium_astro_content_collection_portfolio_development_e57d75f3ad","medium_astro-content-collection-portfolio-development.png",241.38,241381,{"ext":2435,"url":2569,"hash":2570,"mime":2438,"name":2571,"path":2430,"size":2572,"width":2464,"height":2465,"sizeInBytes":2573},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_astro_content_collection_portfolio_development_e57d75f3ad.png","thumbnail_astro_content_collection_portfolio_development_e57d75f3ad","thumbnail_astro-content-collection-portfolio-development.png",30.25,30250,"astro_content_collection_portfolio_development_e57d75f3ad",239.93,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/astro_content_collection_portfolio_development_e57d75f3ad.png","2026-03-10T02:29:59.242Z","2026-03-10T02:29:59.247Z",{"id":2580,"documentId":2581,"title":2582,"slug":2583,"excerpt":2584,"difficulty":11,"estimatedCost":2585,"seoTitle":2586,"seoDescription":2587,"createdAt":2588,"updatedAt":2589,"publishedAt":2590,"maturity":2492,"coverImage":2591},14,"gkvptj1l6vok4xuii8vkj6qe","SvelteKit + Tailwind CSS for Modern Landing Pages","sveltekit-tailwind-css-for-modern-landing-pages","A flexible landing page stack for developers and startups who want modern design, strong performance, and room to grow into a more interactive web experience.","SvelteKit: Free, Tailwind CSS: Free, Hosting: Low or free to start, depending on provider, Optional extras: domain, analytics, forms, email services","SvelteKit + Tailwind CSS Stack Guide for Modern Landing Pages","Learn when to use SvelteKit with Tailwind CSS for landing pages, startup websites, marketing pages, and modern public-facing web experiences.","2026-03-10T03:32:55.146Z","2026-03-10T15:16:43.064Z","2026-03-10T15:16:43.505Z",{"id":2592,"documentId":2593,"name":2594,"alternativeText":2430,"caption":2430,"focalPoint":2430,"width":2431,"height":2432,"formats":2595,"hash":2620,"ext":2435,"mime":2438,"size":2621,"url":2622,"previewUrl":2430,"provider":2470,"provider_metadata":2430,"createdAt":2623,"updatedAt":2623,"publishedAt":2623},7,"dilgak8bwsjs0yty173tnbg9","svelkit-tailwindcss-landing-page.png",{"large":2596,"small":2602,"medium":2608,"thumbnail":2614},{"ext":2435,"url":2597,"hash":2598,"mime":2438,"name":2599,"path":2430,"size":2600,"width":2441,"height":2442,"sizeInBytes":2601},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/large_svelkit_tailwindcss_landing_page_232000d71f.png","large_svelkit_tailwindcss_landing_page_232000d71f","large_svelkit-tailwindcss-landing-page.png",932.81,932811,{"ext":2435,"url":2603,"hash":2604,"mime":2438,"name":2605,"path":2430,"size":2606,"width":2449,"height":2450,"sizeInBytes":2607},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/small_svelkit_tailwindcss_landing_page_232000d71f.png","small_svelkit_tailwindcss_landing_page_232000d71f","small_svelkit-tailwindcss-landing-page.png",262.08,262076,{"ext":2435,"url":2609,"hash":2610,"mime":2438,"name":2611,"path":2430,"size":2612,"width":2457,"height":2449,"sizeInBytes":2613},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/medium_svelkit_tailwindcss_landing_page_232000d71f.png","medium_svelkit_tailwindcss_landing_page_232000d71f","medium_svelkit-tailwindcss-landing-page.png",546.98,546980,{"ext":2435,"url":2615,"hash":2616,"mime":2438,"name":2617,"path":2430,"size":2618,"width":2464,"height":2465,"sizeInBytes":2619},"https://awesome-friends-6b6e40fa18.media.strapiapp.com/thumbnail_svelkit_tailwindcss_landing_page_232000d71f.png","thumbnail_svelkit_tailwindcss_landing_page_232000d71f","thumbnail_svelkit-tailwindcss-landing-page.png",68.48,68477,"svelkit_tailwindcss_landing_page_232000d71f",540.74,"https://awesome-friends-6b6e40fa18.media.strapiapp.com/svelkit_tailwindcss_landing_page_232000d71f.png","2026-03-10T03:33:11.808Z",{"pagination":2625},{"page":2473,"pageSize":2626,"pageCount":2473,"total":2473},25]