Skip to content

docs(docs): add comprehensive tailwind css playground documentation #998

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hatemhosny merged 3 commits into from
Jun 25, 2026
+93 −1
Merged

docs(docs): add comprehensive tailwind css playground documentation #998

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
88e8a2c
docs(docs): add comprehensive tailwind css playground documentation
Oyead Jun 22, 2026
e87cece
chore: address pullfrog bot review regarding unused variantsDemo
Oyead Jun 23, 2026
c076a12
edit tailwindcss docs
hatemhosny Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 93 additions & 1 deletion docs/docs/languages/tailwindcss.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,95 @@
# Tailwind CSS

TODO...
import LiveCodes from '../../src/components/LiveCodes.tsx';
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';

export const basicDemo = {
activeEditor: 'markup',
markup: {
language: 'html',
content: `<div class="flex items-center justify-center h-screen bg-gray-100">\n <h1 class="text-4xl font-bold text-blue-500">Hello, Tailwind!</h1>\n</div>\n`,
},
processors: ['tailwindcss'],
};

export const tailwindcssDemo = {
activeEditor: 'script',
script: {
language: 'react',
content: `export default function() {\n return <h1 className="text-3xl font-bold text-gray-500 text-center m-4">Hello, Tailwind CSS!</h1>;\n}\n`,
},
processors: ['tailwindcss'],
};

[Tailwind CSS](https://tailwindcss.com/) is an open-source CSS framework that provides utility CSS classes that can be composed to build any design, directly in the markup.

## Demo

<LiveCodes template="tailwindcss" height="60vh"></LiveCodes>

## Usage

Tailwind CSS is enabled as a [CSS processor](../features/css.mdx#css-processors). Once enabled from the style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of the [configuration object](../configuration/configuration-object.mdx), all Tailwind utility classes are available immediately in your markup.

<RunInLiveCodes
params={basicDemo}
code={basicDemo.markup.content}
language="html"
formatCode={false}
/>

:::info note

Tailwind CSS is imported using `@import "tailwindcss";` directive in the [style editor](../features/projects.mdx#style-editor).

If no `@import` is added to the style editor, LiveCodes automatically injects it when the Tailwind CSS processor is enabled.

:::

### Usage with CSS Frameworks in JSX/SFCs

CSS Frameworks supported in LiveCodes (e.g. Tailwind CSS, [UnoCSS](./unocss.mdx), [WindiCSS](./windicss.mdx)) can detect class names added in JSX and framework SFCs such as [React](./react.mdx), [Vue](./vue.mdx) and [Svelte](./svelte.mdx). Make sure that the Tailwind CSS processor is enabled.

<RunInLiveCodes
params={tailwindcssDemo}
code={tailwindcssDemo.script.content}
language="jsx"
/>

### Tailwind CSS Plugins

Tailwind CSS plugins can be imported in the [style editor](../features/projects.mdx#style-editor).

```css
@import "@tailwindcss/forms";
@import "@tailwindcss/typography";
@import "@tailwindcss/aspect-ratio";
@import "@tailwindcss/line-clamp";
```
Comment on lines +63 to +68

@coderabbitai coderabbitai Bot Jun 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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.

Suggested change
```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`.



## Processor Info

### Name

`tailwindcss`

## Compiler

Tailwind CSS official compiler, running client-side in the browser. The compiler generates styles on-demand, so only the classes used in your markup are included in the output.

### Version

`tailwindcss`: v4.1.16
Comment on lines +81 to +83

@coderabbitai coderabbitai Bot Jun 25, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎯 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:

🌐 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:

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.


## Starter Template

https://livecodes.io/?template=tailwindcss

## Links

- [Tailwind CSS](https://tailwindcss.com/)
- [Tailwind CSS Documentation](https://tailwindcss.com/docs)
- [LiveCodes CSS Processors](../features/css.mdx#css-processors)
- [UnoCSS](./unocss.mdx)
- [WindiCSS](./windicss.mdx)
Loading