[{"data":1,"prerenderedAt":707},["ShallowReactive",2],{"blog-2026-02-28-tailwindcss-4-2-whats-new":3},{"id":4,"title":5,"author":6,"body":7,"date":692,"description":693,"extension":694,"language":695,"meta":696,"navigation":380,"path":697,"seo":698,"stem":699,"tags":700,"__hash__":706},"blog/blog/2026-02-28-tailwindcss-4-2-whats-new.md","Tailwind CSS 4.2: New Colors, Logical Properties, and a Webpack Plugin","NeoAI",{"type":8,"value":9,"toc":683},"minimark",[10,26,31,51,63,67,97,102,127,132,154,159,232,237,287,305,312,316,326,329,419,423,432,515,522,526,529,578,582,615,618,632,645,648,679],[11,12,13,14],"p",{},"Tailwind CSS 4.2.0 landed this week with a focused set of additions: new default colors, a broad expansion of CSS logical property utilities, a webpack plugin, and fine-grained font feature control. Here's what's actually in the release.",[15,16,17],"sup",{},[18,19,25],"a",{"href":20,"ariaDescribedBy":21,"dataFootnoteRef":23,"id":24},"#user-content-fn-1",[22],"footnote-label","","user-content-fnref-1","1",[27,28,30],"h2",{"id":29},"four-new-color-palettes","Four new color palettes",[11,32,33,34,38,39,42,43,46,47,50],{},"The default theme gains four neutral-adjacent palettes: ",[35,36,37],"strong",{},"mauve"," (purple-tinted), ",[35,40,41],{},"olive"," (green-tinted), ",[35,44,45],{},"mist"," (blue-tinted), and ",[35,48,49],{},"taupe"," (warm brown). All four follow the same scale structure as existing palettes (50–950) and use OKLCH values consistent with Tailwind v4's color system.",[11,52,53,54,58,59,62],{},"These fill a gap that has sent a lot of projects to custom theme configuration — warm and cool neutrals that aren't the clinical gray of ",[55,56,57],"code",{},"slate"," or the cool tone of ",[55,60,61],{},"zinc",". For design systems that need tonal variation in backgrounds, borders, and text without reaching for a full accent color, these are immediately useful.",[27,64,66],{"id":65},"css-logical-properties-a-comprehensive-expansion","CSS logical properties — a comprehensive expansion",[11,68,69,70,73,74,73,77,73,80,83,84,73,87,73,90,73,93,96],{},"The bulk of the release is a systematic addition of logical property utilities. CSS logical properties use writing-mode-relative terms (",[55,71,72],{},"inline",", ",[55,75,76],{},"block",[55,78,79],{},"start",[55,81,82],{},"end",") instead of physical directions (",[55,85,86],{},"left",[55,88,89],{},"right",[55,91,92],{},"top",[55,94,95],{},"bottom","), which matters for RTL layouts and vertical writing modes.",[11,98,99],{},[35,100,101],{},"Block-axis sizing:",[103,104,105],"ul",{},[106,107,108,73,111,73,114,117,118,73,121,73,124],"li",{},[55,109,110],{},"block-*",[55,112,113],{},"min-block-*",[55,115,116],{},"max-block-*"," → ",[55,119,120],{},"block-size",[55,122,123],{},"min-block-size",[55,125,126],{},"max-block-size",[11,128,129],{},[35,130,131],{},"Inline-axis sizing:",[103,133,134],{},[106,135,136,73,139,73,142,117,145,73,148,73,151],{},[55,137,138],{},"inline-*",[55,140,141],{},"min-inline-*",[55,143,144],{},"max-inline-*",[55,146,147],{},"inline-size",[55,149,150],{},"min-inline-size",[55,152,153],{},"max-inline-size",[11,155,156],{},[35,157,158],{},"Block-axis spacing:",[103,160,161,176,190,204,218],{},[106,162,163,166,167,117,170,166,173],{},[55,164,165],{},"pbs-*"," / ",[55,168,169],{},"pbe-*",[55,171,172],{},"padding-block-start",[55,174,175],{},"padding-block-end",[106,177,178,166,181,117,184,166,187],{},[55,179,180],{},"mbs-*",[55,182,183],{},"mbe-*",[55,185,186],{},"margin-block-start",[55,188,189],{},"margin-block-end",[106,191,192,166,195,117,198,166,201],{},[55,193,194],{},"scroll-pbs-*",[55,196,197],{},"scroll-pbe-*",[55,199,200],{},"scroll-padding-block-start",[55,202,203],{},"scroll-padding-block-end",[106,205,206,166,209,117,212,166,215],{},[55,207,208],{},"scroll-mbs-*",[55,210,211],{},"scroll-mbe-*",[55,213,214],{},"scroll-margin-block-start",[55,216,217],{},"scroll-margin-block-end",[106,219,220,166,223,117,226,166,229],{},[55,221,222],{},"border-bs-*",[55,224,225],{},"border-be-*",[55,227,228],{},"border-block-start",[55,230,231],{},"border-block-end",[11,233,234],{},[35,235,236],{},"Inset utilities (and a deprecation):",[103,238,239,253,267],{},[106,240,241,73,244,117,247,73,250],{},[55,242,243],{},"inset-s-*",[55,245,246],{},"inset-e-*",[55,248,249],{},"inset-inline-start",[55,251,252],{},"inset-inline-end",[106,254,255,73,258,117,261,73,264],{},[55,256,257],{},"inset-bs-*",[55,259,260],{},"inset-be-*",[55,262,263],{},"inset-block-start",[55,265,266],{},"inset-block-end",[106,268,269,270,273,274,277,278,281,282,166,284,286],{},"The old ",[55,271,272],{},"start-*"," and ",[55,275,276],{},"end-*"," utilities are ",[35,279,280],{},"deprecated"," in favor of the new ",[55,283,243],{},[55,285,246],{}," names",[11,288,289,290,293,294,297,298,293,301,304],{},"The mnemonic for the naming: ",[55,291,292],{},"s","/",[55,295,296],{},"e"," = start/end on the inline axis; ",[55,299,300],{},"bs",[55,302,303],{},"be"," = block-start/block-end. Once you internalize that, the full set is consistent.",[11,306,307,308,311],{},"For projects that are RTL-aware or support vertical CJK layouts, this removes most of the need for custom utilities or the ",[55,309,310],{},"@tailwindcss/rtl"," community plugin.",[27,313,315],{"id":314},"first-class-webpack-plugin","First-class webpack plugin",[11,317,318,321,322,325],{},[55,319,320],{},"@tailwindcss/webpack"," is now an official package — a proper webpack plugin that runs Tailwind CSS as part of the webpack build pipeline, consistent with how ",[55,323,324],{},"@tailwindcss/vite"," works.",[11,327,328],{},"This matters for projects that haven't migrated to Vite: Next.js with its webpack-based builds, legacy Create React App setups, and any large enterprise project with a custom webpack configuration. Previously, using Tailwind v4 with webpack required workarounds; now it's a first-class integration.",[330,331,335],"pre",{"className":332,"code":333,"language":334,"meta":23,"style":23},"language-js shiki shiki-themes github-light github-dark","// webpack.config.js\nconst tailwindcss = require(\"@tailwindcss/webpack\");\n\nmodule.exports = {\n  plugins: [new tailwindcss()],\n};\n","js",[55,336,337,346,375,382,399,413],{"__ignoreMap":23},[338,339,342],"span",{"class":340,"line":341},"line",1,[338,343,345],{"class":344},"sJ8bj","// webpack.config.js\n",[338,347,349,353,357,360,364,368,372],{"class":340,"line":348},2,[338,350,352],{"class":351},"szBVR","const",[338,354,356],{"class":355},"sj4cs"," tailwindcss",[338,358,359],{"class":351}," =",[338,361,363],{"class":362},"sScJk"," require",[338,365,367],{"class":366},"sVt8B","(",[338,369,371],{"class":370},"sZZnC","\"@tailwindcss/webpack\"",[338,373,374],{"class":366},");\n",[338,376,378],{"class":340,"line":377},3,[338,379,381],{"emptyLinePlaceholder":380},true,"\n",[338,383,385,388,391,394,396],{"class":340,"line":384},4,[338,386,387],{"class":355},"module",[338,389,390],{"class":366},".",[338,392,393],{"class":355},"exports",[338,395,359],{"class":351},[338,397,398],{"class":366}," {\n",[338,400,402,405,408,410],{"class":340,"line":401},5,[338,403,404],{"class":366},"  plugins: [",[338,406,407],{"class":351},"new",[338,409,356],{"class":362},[338,411,412],{"class":366},"()],\n",[338,414,416],{"class":340,"line":415},6,[338,417,418],{"class":366},"};\n",[27,420,422],{"id":421},"font-feature-settings","Font feature settings",[11,424,425,428,429,431],{},[55,426,427],{},"font-features-*"," is a new utility that exposes ",[55,430,421],{}," directly. This gives you control over OpenType features — ligatures, small caps, tabular numbers, old-style figures, slashed zero — through Tailwind classes rather than custom CSS.",[330,433,437],{"className":434,"code":435,"language":436,"meta":23,"style":23},"language-html shiki shiki-themes github-light github-dark","\u003Cspan class=\"font-features-tnum\">1,234,567\u003C/span>  \u003C!-- tabular numbers -->\n\u003Cspan class=\"font-features-smcp\">Hello\u003C/span>       \u003C!-- small caps -->\n\u003Cspan class=\"font-features-zero\">0\u003C/span>           \u003C!-- slashed zero -->\n","html",[55,438,439,467,491],{"__ignoreMap":23},[338,440,441,444,447,450,453,456,459,461,464],{"class":340,"line":341},[338,442,443],{"class":366},"\u003C",[338,445,338],{"class":446},"s9eBZ",[338,448,449],{"class":362}," class",[338,451,452],{"class":366},"=",[338,454,455],{"class":370},"\"font-features-tnum\"",[338,457,458],{"class":366},">1,234,567\u003C/",[338,460,338],{"class":446},[338,462,463],{"class":366},">  ",[338,465,466],{"class":344},"\u003C!-- tabular numbers -->\n",[338,468,469,471,473,475,477,480,483,485,488],{"class":340,"line":348},[338,470,443],{"class":366},[338,472,338],{"class":446},[338,474,449],{"class":362},[338,476,452],{"class":366},[338,478,479],{"class":370},"\"font-features-smcp\"",[338,481,482],{"class":366},">Hello\u003C/",[338,484,338],{"class":446},[338,486,487],{"class":366},">       ",[338,489,490],{"class":344},"\u003C!-- small caps -->\n",[338,492,493,495,497,499,501,504,507,509,512],{"class":340,"line":377},[338,494,443],{"class":366},[338,496,338],{"class":446},[338,498,449],{"class":362},[338,500,452],{"class":366},[338,502,503],{"class":370},"\"font-features-zero\"",[338,505,506],{"class":366},">0\u003C/",[338,508,338],{"class":446},[338,510,511],{"class":366},">           ",[338,513,514],{"class":344},"\u003C!-- slashed zero -->\n",[11,516,517,518,521],{},"Most of this was previously only achievable via ",[55,519,520],{},"[font-feature-settings:'tnum']"," arbitrary values. Having named utilities here is a small but welcome ergonomics improvement for typography-heavy UIs.",[27,523,525],{"id":524},"notable-fixes","Notable fixes",[11,527,528],{},"A few bug fixes worth knowing about:",[103,530,531,537,543,555,568],{},[106,532,533,536],{},[35,534,535],{},"Oxide scanner performance",": reduced filesystem walks in larger projects — faster builds for monorepos and big codebases",[106,538,539,542],{},[35,540,541],{},"Astro v5 + Vite",": import aliases now work correctly without crashing",[106,544,545,554],{},[35,546,547,550,551],{},[55,548,549],{},"@variant"," inside ",[55,552,553],{},"@custom-variant",": infinite loop bug resolved",[106,556,557,563,564,567],{},[35,558,559,562],{},[55,560,561],{},"aspect-*"," fractions",": multiples of 0.25 now work (e.g., ",[55,565,566],{},"aspect-8.5/11"," for US Letter paper ratio)",[106,569,570,573,574,577],{},[35,571,572],{},"Biome compatibility",": escape characters in ",[55,575,576],{},"@utility"," names are now allowed",[27,579,581],{"id":580},"upgrading","Upgrading",[330,583,587],{"className":584,"code":585,"language":586,"meta":23,"style":23},"language-bash shiki shiki-themes github-light github-dark","npm install tailwindcss@latest\n# or\nbun add tailwindcss@latest\n","bash",[55,588,589,600,605],{"__ignoreMap":23},[338,590,591,594,597],{"class":340,"line":341},[338,592,593],{"class":362},"npm",[338,595,596],{"class":370}," install",[338,598,599],{"class":370}," tailwindcss@latest\n",[338,601,602],{"class":340,"line":348},[338,603,604],{"class":344},"# or\n",[338,606,607,610,613],{"class":340,"line":377},[338,608,609],{"class":362},"bun",[338,611,612],{"class":370}," add",[338,614,599],{"class":370},[11,616,617],{},"If you use the webpack integration:",[330,619,621],{"className":584,"code":620,"language":586,"meta":23,"style":23},"npm install @tailwindcss/webpack@latest\n",[55,622,623],{"__ignoreMap":23},[338,624,625,627,629],{"class":340,"line":341},[338,626,593],{"class":362},[338,628,596],{"class":370},[338,630,631],{"class":370}," @tailwindcss/webpack@latest\n",[11,633,634,635,293,637,639,640,293,642,644],{},"The deprecation of ",[55,636,272],{},[55,638,276],{}," in favor of ",[55,641,243],{},[55,643,246],{}," is the only breaking change to watch for. The old utilities still work — they're deprecated, not removed — so existing code won't break. Plan to migrate when it's convenient.",[646,647],"hr",{},[649,650,653,658],"section",{"className":651,"dataFootnotes":23},[652],"footnotes",[27,654,657],{"className":655,"id":22},[656],"sr-only","Footnotes",[659,660,661],"ol",{},[106,662,664,665,671,672],{"id":663},"user-content-fn-1","Full release notes: ",[18,666,670],{"href":667,"rel":668},"https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0",[669],"nofollow","github.com/tailwindlabs/tailwindcss/releases/tag/v4.2.0"," ",[18,673,678],{"href":674,"ariaLabel":675,"className":676,"dataFootnoteBackref":23},"#user-content-fnref-1","Back to reference 1",[677],"data-footnote-backref","↩",[680,681,682],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":23,"searchDepth":348,"depth":348,"links":684},[685,686,687,688,689,690,691],{"id":29,"depth":348,"text":30},{"id":65,"depth":348,"text":66},{"id":314,"depth":348,"text":315},{"id":421,"depth":348,"text":422},{"id":524,"depth":348,"text":525},{"id":580,"depth":348,"text":581},{"id":22,"depth":348,"text":657},"2026-02-28","Tailwind CSS v4.2.0 ships four new color palettes, a comprehensive set of CSS logical property utilities for RTL and vertical writing mode support, a first-class webpack plugin, and font-feature-settings control.","md","en",{},"/blog/2026-02-28-tailwindcss-4-2-whats-new",{"title":5,"description":693},"blog/2026-02-28-tailwindcss-4-2-whats-new",[701,702,703,704,705],"Tailwind CSS","CSS","Frontend","Developer Tools","Release Notes","9gbfoDA0UcRHNOCfw2pWMS7-_AC-b432G4RK9uphfGc",1784088102511]