From 88e8a2c25a39d10d4821d5ff5dc9b1ac5ebbf265 Mon Sep 17 00:00:00 2001 From: Oyead Date: Tue, 23 Jun 2026 01:01:27 +0300 Subject: [PATCH 1/3] docs(docs): add comprehensive tailwind css playground documentation --- docs/docs/languages/tailwindcss.mdx | 99 ++++++++++++++++++++++++++++- 1 file changed, 98 insertions(+), 1 deletion(-) diff --git a/docs/docs/languages/tailwindcss.mdx b/docs/docs/languages/tailwindcss.mdx index 9342548deb..4218e1cdeb 100644 --- a/docs/docs/languages/tailwindcss.mdx +++ b/docs/docs/languages/tailwindcss.mdx @@ -1,3 +1,100 @@ # 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: `
\n

Hello, Tailwind!

\n
\n`, + }, + processors: ['tailwindcss'], +}; + +export const variantsDemo = { + activeEditor: 'markup', + markup: { + language: 'html', + content: `
\n \n
\n`, + }, + processors: ['tailwindcss'], +}; + +export const tailwindcssDemo = { + activeEditor: 'script', + script: { + language: 'react', + content: `export default function() {\n return

Hello, Tailwind CSS!

;\n}\n`, + }, + processors: ['tailwindcss'], +}; + +[Tailwind CSS](https://tailwindcss.com/) is an open-source CSS framework that provides utility CSS classes that can be used to style each element by mixing and matching + +## Demo + + + +## Usage + +Tailwind CSS is enabled as a [CSS processor](../features/css.mdx#css-processors). Once enabled from the style editor menu, all Tailwind utility classes are available immediately in your markup. + +:::info note + +There is no need to add `@tailwind` directives to the style editor. +LiveCodes automatically injects them 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 (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)). + + + +## Language Info + +### Name + +`tailwindcss` + +### Extensions + +`.css` + +### Editor + +`style` + +## 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. + +## Code Formatting + +Using [Prettier](https://prettier.io/). + +## 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) \ No newline at end of file From e87ceceeca125a64cf494c073a52179e931a23c9 Mon Sep 17 00:00:00 2001 From: Oyead Date: Tue, 23 Jun 2026 14:05:37 +0300 Subject: [PATCH 2/3] chore: address pullfrog bot review regarding unused variantsDemo --- docs/docs/languages/tailwindcss.mdx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/docs/docs/languages/tailwindcss.mdx b/docs/docs/languages/tailwindcss.mdx index 4218e1cdeb..d6a2fd2a61 100644 --- a/docs/docs/languages/tailwindcss.mdx +++ b/docs/docs/languages/tailwindcss.mdx @@ -12,15 +12,6 @@ export const basicDemo = { processors: ['tailwindcss'], }; -export const variantsDemo = { - activeEditor: 'markup', - markup: { - language: 'html', - content: `
\n \n
\n`, - }, - processors: ['tailwindcss'], -}; - export const tailwindcssDemo = { activeEditor: 'script', script: { From c076a126bc9f4e822b9dc541eddeb69e03faa474 Mon Sep 17 00:00:00 2001 From: Hatem Hosny Date: Fri, 26 Jun 2026 02:22:11 +0300 Subject: [PATCH 3/3] edit tailwindcss docs --- docs/docs/languages/tailwindcss.mdx | 50 ++++++++++++++++------------- 1 file changed, 27 insertions(+), 23 deletions(-) diff --git a/docs/docs/languages/tailwindcss.mdx b/docs/docs/languages/tailwindcss.mdx index d6a2fd2a61..4f3c94b3e0 100644 --- a/docs/docs/languages/tailwindcss.mdx +++ b/docs/docs/languages/tailwindcss.mdx @@ -21,7 +21,7 @@ export const tailwindcssDemo = { processors: ['tailwindcss'], }; -[Tailwind CSS](https://tailwindcss.com/) is an open-source CSS framework that provides utility CSS classes that can be used to style each element by mixing and matching +[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 @@ -29,14 +29,7 @@ export const tailwindcssDemo = { ## Usage -Tailwind CSS is enabled as a [CSS processor](../features/css.mdx#css-processors). Once enabled from the style editor menu, all Tailwind utility classes are available immediately in your markup. - -:::info note - -There is no need to add `@tailwind` directives to the style editor. -LiveCodes automatically injects them when the Tailwind CSS processor is enabled. - -::: +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. +:::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 (from style editor menu or in [`processors`](../configuration/configuration-object.mdx#processors) property of [configuration object](../configuration/configuration-object.mdx)). +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. -## Language Info +### Tailwind CSS Plugins -### Name +Tailwind CSS plugins can be imported in the [style editor](../features/projects.mdx#style-editor). -`tailwindcss` +```css +@import "@tailwindcss/forms"; +@import "@tailwindcss/typography"; +@import "@tailwindcss/aspect-ratio"; +@import "@tailwindcss/line-clamp"; +``` -### Extensions -`.css` +## Processor Info -### Editor +### Name -`style` +`tailwindcss` ## 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. +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. -## Code Formatting +### Version -Using [Prettier](https://prettier.io/). +`tailwindcss`: v4.1.16 ## Starter Template @@ -88,4 +92,4 @@ https://livecodes.io/?template=tailwindcss - [Tailwind CSS Documentation](https://tailwindcss.com/docs) - [LiveCodes CSS Processors](../features/css.mdx#css-processors) - [UnoCSS](./unocss.mdx) -- [WindiCSS](./windicss.mdx) \ No newline at end of file +- [WindiCSS](./windicss.mdx)