Merge pull request #998 from Oyead/add-TailwindCSS-Docs

docs(docs): add comprehensive tailwind css playground documentation

Author: hatemhosny

docs/docs/languages/tailwindcss.mdx

@@ -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";
+```
+
+
+## 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
+
+## 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)