docs(docs): add comprehensive tailwind css playground documentation

Author: Oyead

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: `<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 variantsDemo = {
+  activeEditor: 'markup',
+  markup: {
+    language: 'html',
+    content: `<div class="flex items-center justify-center h-screen">\n  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 md:px-8 rounded">\n    Hover me\n  </button>\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 used to style each element by mixing and matching
+
+## 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, 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.
+
+:::
+
+<RunInLiveCodes
+  params={basicDemo}
+  code={basicDemo.markup.content}
+  language="html"
+  formatCode={false}
+/>
+
+### 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)).
+
+<RunInLiveCodes
+  params={tailwindcssDemo}
+  code={tailwindcssDemo.script.content}
+  language="react"
+  formatCode={false}
+/>
+
+## 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)