Tailwind CSS

Tailwind CSS is an open-source CSS framework that provides utility CSS classes that can be composed to build any design, directly in the markup.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "tailwindcss"
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "tailwindcss"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "tailwindcss"
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "tailwindcss"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "tailwindcss"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "tailwindcss"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "tailwindcss"
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes
  template="tailwindcss"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Usage

Tailwind CSS is enabled as a CSS processor. Once enabled from the style editor menu or in processors property of the configuration object, all Tailwind utility classes are available immediately in your markup.

Run in LiveCodes

note

Tailwind CSS is imported using @import "tailwindcss"; directive in the 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, WindiCSS) can detect class names added in JSX and framework SFCs such as React, Vue and Svelte. Make sure that the Tailwind CSS processor is enabled.

Run in LiveCodes

Tailwind CSS Plugins

Tailwind CSS legacy JavaScript-based plugins can be loaded using the @plugin directive in the style editor.

@plugin "@tailwindcss/forms";
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/aspect-ratio";
@plugin "@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
• Tailwind CSS Documentation
• LiveCodes CSS Processors
• UnoCSS
• WindiCSS