docs(docs): add comprehensive tailwind css playground documentation#998
Conversation
✅ Deploy Preview for livecodes ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Walkthrough
ChangesTailwind CSS Documentation Page
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~4 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/docs/languages/tailwindcss.mdx`:
- Line 84: The link to the Tailwind CSS JIT compiler documentation in the mdx
file references an outdated v2 archived page at `/docs/just-in-time-mode`.
Update the URL in the markdown link to point to the current Tailwind v3+
documentation page on class detection instead, since JIT is now the default
engine and the v2 page serves only as a historical reference.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 838dae6c-902e-470e-80e3-13ea2ee7e6d7
📒 Files selected for processing (1)
docs/docs/languages/tailwindcss.mdx
|
|
||
| ## Compiler | ||
|
|
||
| [Tailwind CSS JIT compiler](https://tailwindcss.com/docs/just-in-time-mode), running client-side in the browser. The JIT compiler generates styles on-demand, so only the classes used in your markup are included in the output. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor
🧩 Analysis chain
🌐 Web query:
What is the current official Tailwind CSS documentation page that explains class detection / JIT-style on-demand generation for the latest Tailwind version?
💡 Result:
In modern versions of Tailwind CSS (v3.0 and above, including the latest v4.0), "JIT-style" on-demand generation is no longer an optional mode that needs to be enabled—it is the default, underlying engine of the framework [1][2][3]. Because it is now the standard behavior, there is no longer a specific "JIT mode" documentation page. Instead, the documentation explains this concept under the "Core Concepts" section, specifically on the page titled "Styling with utility classes" [4]. This page describes how Tailwind scans your source files to generate CSS on-demand based on the classes you actually use [4]. Key details regarding the current state of Tailwind's compilation: - Default Behavior: Since Tailwind CSS v3.0, the framework has been JIT-only [1]. You do not need to configure any special modes; you simply set up your content paths (in v3) or rely on automatic source detection (in v4) [5][6][2]. - Official Documentation: The primary resource for understanding how Tailwind processes your classes is the "Core Concepts" section of the documentation [4]. You can access it here: https://tailwindcss.com/docs/styling-with-utility-classes. - Evolution: The "Just-in-Time Mode" page [7] exists in the documentation primarily as a historical reference for users migrating from Tailwind CSS v2.x, where JIT was an experimental feature that required manual activation via the mode: 'jit' configuration [7][2]. In summary, you should refer to the "Styling with utility classes" documentation [4] to understand how Tailwind's modern on-demand engine detects and generates your utility classes.
Citations:
- 1: "Old" build/compilation mode for Tailwind 3 tailwindlabs/tailwindcss#6256
- 2: https://eastondev.com/blog/en/posts/dev/20260330-tailwind-performance-optimization/
- 3: https://www.acciyo.com/understanding-tailwind-css-jit-mode-for-faster-development-in-2025/
- 4: https://tailwindcss.com/docs/styling-with-utility-classes
- 5: https://v3.tailwindcss.com/docs/v4-beta
- 6: https://tailwindcss.com/blog/tailwindcss-v4
- 7: https://tailwindcss.com/docs/just-in-time-mode
Update the JIT docs reference to a current-version Tailwind page.
Line 84 links to a v2 archived page (/docs/just-in-time-mode). In Tailwind v3+, JIT is the default engine rather than an optional mode, and this page now serves only as a historical reference. Switch to the current documentation on class detection.
Suggested change
-[Tailwind CSS JIT compiler](https://tailwindcss.com/docs/just-in-time-mode), running client-side in the browser. The JIT compiler generates styles on-demand, so only the classes used in your markup are included in the output.
+[Tailwind CSS compiler](https://tailwindcss.com/docs/styling-with-utility-classes), running client-side in the browser. It generates styles on-demand, so only the classes used in your markup are included in the output.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| [Tailwind CSS JIT compiler](https://tailwindcss.com/docs/just-in-time-mode), running client-side in the browser. The JIT compiler generates styles on-demand, so only the classes used in your markup are included in the output. | |
| [Tailwind CSS compiler](https://tailwindcss.com/docs/styling-with-utility-classes), running client-side in the browser. It generates styles on-demand, so only the classes used in your markup are included in the output. |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/docs/languages/tailwindcss.mdx` at line 84, The link to the Tailwind CSS
JIT compiler documentation in the mdx file references an outdated v2 archived
page at `/docs/just-in-time-mode`. Update the URL in the markdown link to point
to the current Tailwind v3+ documentation page on class detection instead, since
JIT is now the default engine and the v2 page serves only as a historical
reference.
![pullfrog[bot]](https://avatars.githubusercontent.com/in/1768019?s=60&v=4){kind=small}
There was a problem hiding this comment.
ℹ️ No critical issues — one minor cleanup suggestion inline.
Reviewed changes — fills in the Tailwind CSS language documentation page which was previously a TODO stub.
- Add Tailwind CSS docs page — demo embeds, usage guide (HTML and JSX/SFC), language info, compiler notes, and reference links.
- Three demo configs —
basicDemo,variantsDemo, andtailwindcssDemofor interactive playground examples.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
Oyead
force-pushed
the
add-TailwindCSS-Docs
branch
from
c9fde19 to
e87cece
Compare
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — removed the unused variantsDemo constant, addressing the prior Pullfrog review feedback.
- Removed unused
variantsDemo— the variant-specific demo config was exported but never referenced on the page.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes — removed the unused variantsDemo constant (addressing prior Pullfrog review feedback) and reworded the commit message. No other changes since the last review.
- Removed unused
variantsDemo— the variant-specific demo config was exported but never referenced on the page.
DeepSeek Pro (free via Pullfrog for OSS) ｜ 𝕏
|
Thank you @Oyead I have added some minor edits. |
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/docs/languages/tailwindcss.mdx`:
- Around line 81-83: The Tailwind CSS docs still pin an outdated version string
in the Version section, so update the documented `tailwindcss` value to the
current release or switch to a non-patched reference if this page should stay
static. Adjust the version text in the Tailwind docs content so it stays aligned
with the current supported `tailwindcss` release and avoids hardcoding an
obsolete patch version.
- Around line 63-68: The Tailwind plugin example is using CSS imports instead of
plugin registration, which is incorrect for these packages. Update the snippet
in the Tailwind CSS docs to use the plugin directive for each of the plugin
packages, matching the intended usage of `@tailwindcss/forms`,
`@tailwindcss/typography`, `@tailwindcss/aspect-ratio`, and `@tailwindcss/line-clamp`.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 38676a69-aaed-489e-a208-6ef15a1f8176
📒 Files selected for processing (1)
docs/docs/languages/tailwindcss.mdx
| ```css | ||
| @import "@tailwindcss/forms"; | ||
| @import "@tailwindcss/typography"; | ||
| @import "@tailwindcss/aspect-ratio"; | ||
| @import "@tailwindcss/line-clamp"; | ||
| ``` |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== file excerpt ==\n'
sed -n '50,90p' docs/docs/languages/tailwindcss.mdx
printf '\n== nearby version refs ==\n'
rg -n "Tailwind|`@plugin`|`@import`|forms|typography|aspect-ratio|line-clamp" docs/docs/languages/tailwindcss.mdx docs -g '*.mdx' -g '*.md' | sed -n '1,120p'Repository: live-codes/livecodes
Length of output: 18758
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== file excerpt ==\n'
sed -n '50,90p' docs/docs/languages/tailwindcss.mdx
printf '\n== nearby version refs ==\n'
rg -n "Tailwind|`@plugin`|`@import`|forms|typography|aspect-ratio|line-clamp" docs/docs/languages/tailwindcss.mdx docs -g '*.mdx' -g '*.md' | sed -n '1,120p'Repository: live-codes/livecodes
Length of output: 18758
🏁 Script executed:
#!/bin/bash
set -euo pipefail
git ls-files docs/docs/languages/tailwindcss.mdx
printf '\n---\n'
sed -n '1,140p' docs/docs/languages/tailwindcss.mdx | nl -ba | sed -n '55,75p'Repository: live-codes/livecodes
Length of output: 239
Use @plugin here, not @import.
These are Tailwind plugin packages, so the snippet should show plugin registration instead of CSS imports.
Suggested change
```css
-@import "`@tailwindcss/forms`";
-@import "`@tailwindcss/typography`";
-@import "`@tailwindcss/aspect-ratio`";
-@import "`@tailwindcss/line-clamp`";
+@plugin "`@tailwindcss/forms`";
+@plugin "`@tailwindcss/typography`";
+@plugin "`@tailwindcss/aspect-ratio`";
+@plugin "`@tailwindcss/line-clamp`";📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```css | |
| @import "@tailwindcss/forms"; | |
| @import "@tailwindcss/typography"; | |
| @import "@tailwindcss/aspect-ratio"; | |
| @import "@tailwindcss/line-clamp"; | |
| ``` |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/docs/languages/tailwindcss.mdx` around lines 63 - 68, The Tailwind
plugin example is using CSS imports instead of plugin registration, which is
incorrect for these packages. Update the snippet in the Tailwind CSS docs to use
the plugin directive for each of the plugin packages, matching the intended
usage of `@tailwindcss/forms`, `@tailwindcss/typography`, `@tailwindcss/aspect-ratio`,
and `@tailwindcss/line-clamp`.
| ### Version | ||
|
|
||
| `tailwindcss`: v4.1.16 |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the documented Tailwind version and nearby context.
git ls-files docs/docs/languages/tailwindcss.mdx
printf '\n--- file excerpt ---\n'
cat -n docs/docs/languages/tailwindcss.mdx | sed -n '70,95p'
printf '\n--- search for tailwind version references ---\n'
rg -n "tailwindcss.*v4\.1\.16|v4\.1\.16|tailwindcss" docs -g '*.mdx' -g '*.md' -g '*.json' -g '*.ts' -g '*.js'Repository: live-codes/livecodes
Length of output: 6182
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the documented Tailwind version and nearby context.
git ls-files docs/docs/languages/tailwindcss.mdx
printf '\n--- file excerpt ---\n'
cat -n docs/docs/languages/tailwindcss.mdx | sed -n '70,95p'
printf '\n--- search for tailwind version references ---\n'
rg -n "tailwindcss.*v4\.1\.16|v4\.1\.16|tailwindcss" docs -g '*.mdx' -g '*.md' -g '*.json' -g '*.ts' -g '*.js'Repository: live-codes/livecodes
Length of output: 6182
🌐 Web query:
Tailwind CSS latest release June 2026 4.3.1
💡 Result:
Tailwind CSS version 4.3.1 was released on June 12, 2026 [1][2]. This release included several updates and fixes across the framework and its tooling, including: - New Features: Added a --silent option to the @tailwindcss/cli for suppressing output [3][4] and introduced support for using @apply with CSS mixins [5][4]. - Improvements: Better handling of @source globs, inclusion of ESM type declarations for @tailwindcss/postcss, and improved @variant usage inside addBase [5]. - Bug Fixes: Addressed numerous issues, including deprecation warning triggers, edge cases in canonicalization, sourcemap warnings, CLI watch-mode recovery, and spacing utility issues involving drop-shadow with calc [5]. - Integration Adjustments: Ensured @tailwindcss/webpack functions in Rspack projects without requiring webpack as a peer dependency, and made adjustments to inset shadow transitions and empty rule migrations [5]. The release was finalized via pull request #20226, which updated the version across the monorepo, including core packages, Rust-based native bindings, and various integration packages [6][7].
Citations:
- 1: https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md
- 2: https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.3.1
- 3: https://github.com/tailwindlabs/tailwindcss/releases
- 4: https://releases.sh/tailwind-css/tailwind-css
- 5: https://www.changes.watch/updates/tailwind-css-2026-06-12-v4-3-1
- 6: 4.3.1 tailwindlabs/tailwindcss#20226
- 7: tailwindlabs/tailwindcss@8a14a71
🌐 Web query:
Tailwind CSS latest release June 2026 4.3.1
💡 Result:
Tailwind CSS version 4.3.1 was released on June 12, 2026 [1][2][3]. This release included several new features, improvements, and bug fixes: New Features and Improvements - Added a --silent option to the @tailwindcss/cli to suppress output [2][4]. - Enabled support for @apply with CSS mixins [4]. - Added support for using @variant inside addBase [4]. - Improved @source glob handling [4]. - Included ESM type declarations for @tailwindcss/postcss [4]. Bug Fixes and Adjustments - Fixed issues related to deprecation warnings, canonicalization edge cases, and sourcemap warnings [4]. - Resolved bugs involving drop-shadow color utilities with calc, CLI watch-mode recovery, Twig class extraction, and spacing utility behaviors [4]. - Addressed UTF-8 handling for Ruby/Vue preprocessors [4]. - Adjusted internal behaviors including drop-shadow custom values, inset shadow transitions, and empty rule migration [4]. - Ensured @tailwindcss/webpack functions in Rspack projects without requiring webpack as a peer dependency [4].
Citations:
- 1: https://github.com/tailwindlabs/tailwindcss/blob/HEAD/CHANGELOG.md
- 2: https://github.com/tailwindlabs/tailwindcss/releases
- 3: https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.3.1
- 4: https://www.changes.watch/updates/tailwind-css-2026-06-12-v4-3-1
Update the documented Tailwind version. v4.1.16 is behind Tailwind 4.3.1; either refresh the pinned value or avoid hardcoding a patch version in static docs.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/docs/languages/tailwindcss.mdx` around lines 81 - 83, The Tailwind CSS
docs still pin an outdated version string in the Version section, so update the
documented `tailwindcss` value to the current release or switch to a non-patched
reference if this page should stay static. Adjust the version text in the
Tailwind docs content so it stays aligned with the current supported
`tailwindcss` release and avoids hardcoding an obsolete patch version.
|
2 participants
What type of PR is this? (check all applicable)
Description
Add Tailwind CSS language documentation
Fills in the tailwindcss.mdx language page which was previously a TODO.
Related Tickets & Documents
#769
Mobile & Desktop Screenshots/Recordings
Added tests?
Added to documentations?
[optional] Are there any post-deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit