======================== CODE SNIPPETS ======================== TITLE: Basic HTML structure with Tailwind CSS classes DESCRIPTION: This HTML example demonstrates a basic page setup, including the necessary meta tags and a link to the compiled CSS file. It also shows a heading styled with Tailwind's utility classes like `text-3xl`, `font-bold`, and `underline`. SOURCE: https://tailwindcss.com/docs/installation/using-postcss LANGUAGE: HTML CODE: ```

Hello world!

``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS dependencies via npm DESCRIPTION: This command installs the necessary packages: `tailwindcss`, `@tailwindcss/postcss`, and `postcss` using npm. These are fundamental for integrating Tailwind CSS as a PostCSS plugin in your project. SOURCE: https://tailwindcss.com/docs/installation/using-postcss LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss ``` ---------------------------------------- TITLE: Example HTML structure using Tailwind CSS classes DESCRIPTION: A basic HTML document demonstrating how to link your compiled CSS file and apply Tailwind's utility classes to elements. Ensure your framework correctly includes the compiled stylesheet in the ``. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: HTML CODE: ```

Hello world!

``` ---------------------------------------- TITLE: Start your development build process DESCRIPTION: This command initiates your project's development build process, typically defined in your `package.json` scripts. It compiles your CSS, including Tailwind styles, and often starts a local development server. SOURCE: https://tailwindcss.com/docs/installation/using-postcss LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start Qwik development server DESCRIPTION: Executes the `npm run dev` command to start the development server, which builds and serves the Qwik application, enabling live preview and hot module reloading. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/qwik LANGUAGE: bash CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Install Tailwind CSS and CLI via npm DESCRIPTION: This command installs the core `tailwindcss` package along with the `@tailwindcss/cli` tool using npm. These packages are fundamental for leveraging the Tailwind CLI to process your CSS and generate utility classes. SOURCE: https://tailwindcss.com/docs/installation/tailwind-cli LANGUAGE: Terminal CODE: ``` npm install tailwindcss @tailwindcss/cli ``` ---------------------------------------- TITLE: Start SvelteKit Development Server DESCRIPTION: Executes the `npm run dev` command to start the SvelteKit development server. This allows developers to preview their application and utilize live reloading during development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start the Vite development server DESCRIPTION: Run the development server using `npm run dev`. This command compiles your assets, watches for changes, and serves your application locally, allowing you to see your Tailwind CSS styles in action. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start the Tailwind CLI build process with watch mode DESCRIPTION: Execute this command to initiate the Tailwind CSS build. It scans your specified input CSS file (`./src/input.css`) and any linked HTML/JS files for Tailwind classes, then generates the final CSS output to `./src/output.css`. The `--watch` flag enables continuous rebuilding whenever source files change. SOURCE: https://tailwindcss.com/docs/installation/tailwind-cli LANGUAGE: Terminal CODE: ``` npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch ``` ---------------------------------------- TITLE: Start Ember.js development server DESCRIPTION: Runs the `npm run start` command to initiate the Ember.js build process and start the development server. This allows you to view your application in a web browser and see the applied Tailwind CSS styles. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/emberjs LANGUAGE: Terminal CODE: ``` npm run start ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin via npm DESCRIPTION: Install the necessary `tailwindcss` and `@tailwindcss/vite` packages using npm. These packages are essential for integrating Tailwind CSS with your Vite build process. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Start Astro development server DESCRIPTION: Executes the `npm run dev` command to start the Astro development server, allowing you to preview your project and see Tailwind CSS styles applied in real-time. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/astro LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Create a new Vite project DESCRIPTION: Initialize a new Vite project using `npm create vite@latest` and navigate into the project directory. This command sets up the basic project structure. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: Shell CODE: ``` npm create vite@latest my-project cd my-project ``` ---------------------------------------- TITLE: Integrate compiled Tailwind CSS and use utility classes in HTML DESCRIPTION: This HTML snippet demonstrates how to link the compiled `output.css` file in your document's `` section. It also provides a basic example of applying Tailwind's utility classes (e.g., `text-3xl`, `font-bold`, `underline`) directly to an HTML element to style content. SOURCE: https://tailwindcss.com/docs/installation/tailwind-cli LANGUAGE: HTML CODE: ```

Hello world!

``` ---------------------------------------- TITLE: Start Phoenix development server DESCRIPTION: Run the `mix phx.server` command to start the Phoenix development server. This command also initiates the asset build process, including the compilation of your Tailwind CSS. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Shell CODE: ``` mix phx.server ``` ---------------------------------------- TITLE: Start Development Server DESCRIPTION: Executes the `npm run dev` command, which typically starts the development server configured by Vite, enabling live reloading and local preview of the application. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/react-router LANGUAGE: shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start Gatsby development server DESCRIPTION: Runs the `gatsby develop` command to start the local development server. This compiles the project and provides a live-reloading environment for development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/gatsby LANGUAGE: bash CODE: ``` gatsby develop ``` ---------------------------------------- TITLE: Start the Next.js development server DESCRIPTION: This command initiates the Next.js development server, which compiles your project and provides a live-reloading environment for local development and testing. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nextjs LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start Rspack Development Server DESCRIPTION: Execute the `npm run dev` command to start the Rspack development server. This compiles your project, applies Tailwind CSS, and provides a live-reloading environment for development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Create a new Nuxt project DESCRIPTION: Start by creating a new Nuxt project using `create-nuxt` if you don’t have one set up already. This command initializes a new Nuxt application and navigates into its directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nuxt LANGUAGE: Shell CODE: ``` npm create nuxt my-project cd my-project ``` ---------------------------------------- TITLE: Import Tailwind CSS into your main CSS file DESCRIPTION: Add this `@import` statement to your project's main CSS file (e.g., `src/input.css`). This line tells Tailwind to inject its base styles, components, and utility classes into your stylesheet during the build process. SOURCE: https://tailwindcss.com/docs/installation/tailwind-cli LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Start Nuxt development server DESCRIPTION: Run the development server using `npm run dev`. This command starts your Nuxt application, allowing you to see the changes and use Tailwind CSS for styling. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nuxt LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Create a new Qwik project DESCRIPTION: Initializes a new Qwik project using `create-qwik` and navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/qwik LANGUAGE: bash CODE: ``` npm create qwik@latest empty my-project cd my-project ``` ---------------------------------------- TITLE: Start the development build process DESCRIPTION: Initiates the development server using `npm run dev`, which compiles the SolidJS application with Tailwind CSS. This command provides live reloading, allowing developers to see changes instantly. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/solidjs LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start the Meteor project build process DESCRIPTION: This command initiates the development server and build process for the Meteor application. It allows for real-time compilation and serving of the project, enabling live development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/meteor LANGUAGE: Shell CODE: ``` npm run start ``` ---------------------------------------- TITLE: Add Tailwind CSS PostCSS plugin to configuration DESCRIPTION: This configuration snippet for `postcss.config.mjs` (or your PostCSS configuration file) adds the `@tailwindcss/postcss` plugin to your PostCSS setup. This enables PostCSS to correctly process and compile Tailwind CSS directives. SOURCE: https://tailwindcss.com/docs/installation/using-postcss LANGUAGE: JavaScript CODE: ``` export default { plugins: { "@tailwindcss/postcss": {}, }} ``` ---------------------------------------- TITLE: Create SvelteKit Project DESCRIPTION: Initializes a new SvelteKit project using the `npx sv create` command and then navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: Shell CODE: ``` npx sv create my-project cd my-project ``` ---------------------------------------- TITLE: Integrate Tailwind CSS Play CDN in HTML DESCRIPTION: This example demonstrates how to include the Tailwind CSS Play CDN script in the section of an HTML file. This setup allows for immediate use of Tailwind's utility classes for development purposes without a build step. SOURCE: https://tailwindcss.com/docs/installation/play-cdn LANGUAGE: HTML CODE: ```

Hello world!

``` ---------------------------------------- TITLE: Start Rspack Development Server DESCRIPTION: Initiates the Rspack development server, compiling and serving the project, typically with hot-reloading capabilities. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Start Parcel build process DESCRIPTION: This command initiates Parcel's development server and build process, compiling the index.html file and its dependencies. It allows for live reloading and development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/parcel LANGUAGE: bash CODE: ``` npx parcel src/index.html ``` ---------------------------------------- TITLE: Create a New Rspack Project DESCRIPTION: Initializes a new Rspack project using the Rspack CLI, providing a foundational setup for development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue LANGUAGE: Shell CODE: ``` npm create rspack@latest ``` ---------------------------------------- TITLE: Start the development build process DESCRIPTION: Run the development build command to compile your assets, including Tailwind CSS. This command typically watches for file changes and rebuilds automatically during development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite LANGUAGE: bash CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Create a new Laravel project DESCRIPTION: Initiate a new Laravel project using the Laravel installer command. This command sets up the basic project structure and navigates into the new directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite LANGUAGE: bash CODE: ``` laravel new my-project cd my-project ``` ---------------------------------------- TITLE: Create a new Ruby on Rails project DESCRIPTION: Initializes a new Ruby on Rails application with a specified name and then navigates into the newly created project directory. This command is typically the first step when starting a new Rails development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails LANGUAGE: Shell CODE: ``` rails new my-project cd my-project ``` ---------------------------------------- TITLE: Create a new Phoenix project DESCRIPTION: Instructions to initialize a new Phoenix project using the `mix phx.new` command and then navigate into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Shell CODE: ``` mix phx.new myproject cd myproject ``` ---------------------------------------- TITLE: Start Angular development server DESCRIPTION: Runs the Angular development server using `ng serve`. This command compiles your application, serves it locally, and enables live reloading, allowing you to see changes as you develop. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/angular LANGUAGE: bash CODE: ``` ng serve ``` ---------------------------------------- TITLE: Create a new Astro project DESCRIPTION: Initializes a new Astro project using the `create astro` command and navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/astro LANGUAGE: Shell CODE: ``` npm create astro@latest my-project cd my-project ``` ---------------------------------------- TITLE: Start the development build process DESCRIPTION: Executes the `npm run dev` command to initiate the development server and asset build process. This command compiles all project assets, including the Tailwind CSS, for local development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/adonisjs LANGUAGE: Shell CODE: ``` npm run dev ``` ---------------------------------------- TITLE: Initialize a new Parcel project DESCRIPTION: This step outlines how to set up a new Parcel project from scratch, including creating directories and initializing npm. It prepares the environment for installing Tailwind CSS. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/parcel LANGUAGE: bash CODE: ``` mkdir my-project cd my-project npm init -y npm install parcel mkdir src touch src/index.html ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin for Qwik DESCRIPTION: Installs the core `tailwindcss` package and the `@tailwindcss/vite` plugin, along with their necessary peer dependencies, using npm. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/qwik LANGUAGE: bash CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Start Laravel Mix build process with npm DESCRIPTION: This command initiates the Laravel Mix build process, typically in watch mode, to compile assets including Tailwind CSS. It continuously monitors for changes and rebuilds the project as needed during development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/mix LANGUAGE: bash CODE: ``` npm run watch ``` ---------------------------------------- TITLE: Start Webpack Encore build process DESCRIPTION: Initiates the Webpack Encore build process in watch mode by running `npm run watch`. This command compiles your assets, including Tailwind CSS, and automatically rebuilds them whenever changes are detected in your source files. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/symfony LANGUAGE: Shell CODE: ``` npm run watch ``` ---------------------------------------- TITLE: Install Tailwind CSS CLI DESCRIPTION: Execute the `mix tailwind.install` command to download and set up the standalone Tailwind CSS command-line interface (CLI) executable within your project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Shell CODE: ``` mix tailwind.install ``` ---------------------------------------- TITLE: Create a new Symfony project DESCRIPTION: Initializes a new Symfony web application using the Symfony Installer and navigates into the newly created project directory. This is the foundational step before integrating front-end tools. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/symfony LANGUAGE: Shell CODE: ``` symfony new --webapp my-project cd my-project ``` ---------------------------------------- TITLE: Import Tailwind CSS into your main CSS file DESCRIPTION: This `@import` rule should be added to your main CSS file (e.g., `src/index.css`). It instructs PostCSS to include Tailwind's base styles, components, and utility classes into your final compiled CSS. SOURCE: https://tailwindcss.com/docs/installation/using-postcss LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Start the development build process for Ruby on Rails DESCRIPTION: Initiates the development server and asset compilation process for the Ruby on Rails application. This command typically watches for file changes and rebuilds assets, including Tailwind CSS, ensuring that styles are applied correctly during development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails LANGUAGE: Shell CODE: ``` ./bin/dev ``` ---------------------------------------- TITLE: Create a new AdonisJS project DESCRIPTION: Initializes a new AdonisJS project using the `create adonisjs` command with the `web` kit and then navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/adonisjs LANGUAGE: Shell CODE: ``` npm init adonisjs@latest my-project -- --kit=web cd my-project ``` ---------------------------------------- TITLE: Apply Responsive place-content Utilities in Tailwind CSS Grid DESCRIPTION: This example demonstrates how to apply `place-content` utilities to a grid container, including using responsive variants. It shows how to initially align content to the start of the block axis and then center it on medium screen sizes and above, showcasing adaptive layout behavior. SOURCE: https://tailwindcss.com/docs/place-content LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Import Tailwind CSS into your main CSS file DESCRIPTION: Add the `@import "tailwindcss";` directive to your primary CSS file. This line imports all of Tailwind's base styles, components, and utilities. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite Plugin DESCRIPTION: Installs the core `tailwindcss` package and its SvelteKit-specific Vite plugin, `@tailwindcss/vite`, as development dependencies using npm. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Create React Router Project DESCRIPTION: Initializes a new React Router project using the `create-react-router` command-line tool and then navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/react-router LANGUAGE: shell CODE: ``` npx create-react-router@latest my-project cd my-project ``` ---------------------------------------- TITLE: Install Tailwind CSS gems for Ruby on Rails DESCRIPTION: Adds the `tailwindcss-ruby` and `tailwindcss-rails` gems to the project's Gemfile, making them available for use. Following the gem installation, the `tailwindcss:install` command is executed to set up the necessary configuration files and assets for Tailwind CSS within the Rails application. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/ruby-on-rails LANGUAGE: Shell CODE: ``` ./bin/bundle add tailwindcss-ruby ./bin/bundle add tailwindcss-rails ./bin/rails tailwindcss:install ``` ---------------------------------------- TITLE: Configure Tailwind CSS Vite plugin in vite.config.ts DESCRIPTION: Add the `@tailwindcss/vite` plugin to your Vite configuration file (`vite.config.ts`). This step ensures that Tailwind CSS is processed correctly by Vite during development and build. SOURCE: https://tailwindcss.com/docs/index LANGUAGE: TypeScript CODE: ``` import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), ], }) ``` ---------------------------------------- TITLE: Tailwind CSS mask-composite Responsive Example DESCRIPTION: This example demonstrates applying `mask-composite` utilities in HTML. It shows how to use `mask-add` for default behavior and `md:mask-subtract` to apply a different mask composition at medium screen sizes and above, illustrating responsive design with Tailwind CSS. SOURCE: https://tailwindcss.com/docs/mask-composite LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Create a new Ember.js project DESCRIPTION: Initializes a new Ember.js project using Ember CLI with Embroider and no welcome page, then navigates into the newly created project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/emberjs LANGUAGE: Terminal CODE: ``` npx ember-cli new my-project --embroider --no-welcome cd my-project ``` ---------------------------------------- TITLE: Create a New Rspack Project DESCRIPTION: Initiate a new Rspack project using the Rspack CLI. This command sets up the basic project structure, ready for further configuration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: Shell CODE: ``` npm create rspack@latest ``` ---------------------------------------- TITLE: Create a new Next.js project with TypeScript and ESLint DESCRIPTION: This command initializes a new Next.js application using `create-next-app`, configuring it with TypeScript, ESLint, and the App Router. After creation, it navigates into the new project directory. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nextjs LANGUAGE: Shell CODE: ``` npx create-next-app@latest my-project --typescript --eslint --app cd my-project ``` ---------------------------------------- TITLE: Apply Responsive Scroll Snap Alignment with Tailwind CSS DESCRIPTION: This example demonstrates how to apply responsive scroll snap alignment using Tailwind CSS utilities. The `snap-center` class sets the default alignment, while `md:snap-start` overrides it to `start` for medium screen sizes and above, showcasing the use of breakpoint variants. SOURCE: https://tailwindcss.com/docs/scroll-snap-align LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS Dependencies DESCRIPTION: Install the core Tailwind CSS package (`tailwindcss`), the PostCSS plugin for Tailwind (`@tailwindcss/postcss`), and their necessary peer dependencies (`postcss`, `postcss-loader`) using npm. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss postcss-loader ``` ---------------------------------------- TITLE: Create a new Meteor project using npx DESCRIPTION: This command initializes a new Meteor application with the specified project name and navigates into its directory, preparing the environment for further development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/meteor LANGUAGE: Shell CODE: ``` npx meteor create my-project cd my-project ``` ---------------------------------------- TITLE: Apply Tailwind CSS classes in a SolidJS component DESCRIPTION: Demonstrates how to use Tailwind's utility classes directly within a SolidJS component's JSX. This example applies text size, font weight, and underline styles to an `

` element, showcasing immediate styling capabilities. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/solidjs LANGUAGE: JavaScript CODE: ``` export default function App() { return (

Hello world!

)} ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin DESCRIPTION: Installs the necessary npm packages for Tailwind CSS integration with Vite. This includes `tailwindcss` itself and `@tailwindcss/vite`, which is the official plugin for Vite, along with their peer dependencies. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/solidjs LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Create a new Gatsby project DESCRIPTION: Initializes a new Gatsby project using the Gatsby CLI and navigates into the newly created project directory. This is the first step to set up your development environment. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/gatsby LANGUAGE: bash CODE: ``` gatsby new my-project cd my-project ``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS dependencies via npm DESCRIPTION: This command installs the core `tailwindcss` package, the `@tailwindcss/postcss` plugin, and `postcss` itself as development dependencies required for Tailwind CSS integration in a Next.js project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nextjs LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss ``` ---------------------------------------- TITLE: Use Tailwind CSS classes in Phoenix HTML DESCRIPTION: An example demonstrating how to apply Tailwind's utility classes directly within an HTML element in a Phoenix HEEX template. This shows basic styling for text size, weight, and decoration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: HTML CODE: ```

Hello world!

``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin for Laravel DESCRIPTION: Install the necessary npm packages for Tailwind CSS and its Vite integration. This includes `tailwindcss` and `@tailwindcss/vite` as development dependencies. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite LANGUAGE: bash CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS dependencies DESCRIPTION: Installs Tailwind CSS, its PostCSS plugin (`@tailwindcss/postcss`), and `postcss-loader` using npm. These packages are crucial for processing Tailwind's utility classes and integrating them into your build pipeline. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/symfony LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss postcss-loader ``` ---------------------------------------- TITLE: Import Tailwind CSS into Qwik global stylesheet DESCRIPTION: Adds an `@import` statement to the project's global CSS file (e.g., `./src/global.css` or `app.css`) to include all Tailwind CSS styles. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/qwik LANGUAGE: css CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Use Tailwind CSS utility classes in Vue template DESCRIPTION: Start applying Tailwind's utility classes directly in your Vue components to style your content. This example demonstrates a basic `h1` element styled with Tailwind classes for font size, weight, and text decoration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nuxt LANGUAGE: Vue CODE: ``` ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite Plugin DESCRIPTION: Installs the core `tailwindcss` package and its dedicated Vite plugin (`@tailwindcss/vite`) along with their necessary peer dependencies using npm, preparing the project for Tailwind CSS integration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/react-router LANGUAGE: shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS with npm DESCRIPTION: This command installs Tailwind CSS, `@tailwindcss/postcss`, and `postcss` as peer dependencies using npm. These packages are essential for compiling Tailwind CSS in a Laravel project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/mix LANGUAGE: bash CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss ``` ---------------------------------------- TITLE: Install Tailwind plugin in Phoenix dependencies DESCRIPTION: Add the Tailwind plugin to your Phoenix project's dependencies in `mix.exs` and then run `mix deps.get` to fetch and install it. The plugin is configured to run only in the development environment. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Elixir CODE: ``` defp deps do [ # … {:tailwind, "~> 0.3", runtime: Mix.env() == :dev}, ]end ``` ---------------------------------------- TITLE: Install Webpack Encore for asset building in Symfony DESCRIPTION: Removes default Symfony UX bundles that might conflict or are not needed, then installs Webpack Encore along with `symfony/ux-turbo` and `symfony/stimulus-bundle`. Webpack Encore is essential for managing and compiling front-end assets like CSS and JavaScript. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/symfony LANGUAGE: Shell CODE: ``` composer remove symfony/ux-turbo symfony/asset-mapper symfony/stimulus-bundle composer require symfony/webpack-encore-bundle symfony/ux-turbo symfony/stimulus-bundle ``` ---------------------------------------- TITLE: Import Global CSS into SvelteKit Layout DESCRIPTION: Creates a `+layout.svelte` file in the `src/routes` directory and imports the `app.css` stylesheet. This ensures that the global Tailwind CSS styles are applied across all pages in the SvelteKit application. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: Svelte CODE: ``` {@render children()} ``` ---------------------------------------- TITLE: Create a new SolidJS project using Vite DESCRIPTION: Initializes a new SolidJS project with the Vite template using `npx degit`. This command sets up the basic project structure and navigates into the newly created directory, preparing it for further development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/solidjs LANGUAGE: Shell CODE: ``` npx degit solidjs/templates/js my-project cd my-project ``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS Dependencies DESCRIPTION: Installs Tailwind CSS, `@tailwindcss/postcss`, and their peer dependencies (`postcss`, `postcss-loader`) required for integrating Tailwind CSS with PostCSS in a Rspack project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss postcss-loader ``` ---------------------------------------- TITLE: Import Tailwind CSS into Global Stylesheet DESCRIPTION: Creates a new `app.css` file within the `src` directory and adds an `@import` rule to pull in Tailwind CSS directives, making its utility classes available globally. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Apply Tailwind CSS place-self utilities responsively in HTML DESCRIPTION: This example demonstrates how to apply Tailwind CSS `place-self` utilities, such as `place-self-start` and `place-self-end`, conditionally based on screen size using responsive design variants like `md:`. It shows how to change an item's alignment from start to end on medium screens and above within an HTML div element. SOURCE: https://tailwindcss.com/docs/place-self LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Install Tailwind CSS and Gatsby PostCSS plugin DESCRIPTION: Installs the core Tailwind CSS package, its PostCSS plugin, the PostCSS processor itself, and the Gatsby plugin for PostCSS. These packages are crucial for integrating Tailwind CSS into a Gatsby build process. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/gatsby LANGUAGE: bash CODE: ``` npm install @tailwindcss/postcss tailwindcss postcss gatsby-plugin-postcss ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin DESCRIPTION: Install `@tailwindcss/vite` and its peer dependencies via npm. This command adds the necessary packages to your project for integrating Tailwind CSS with Vite, which Nuxt uses. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nuxt LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin DESCRIPTION: Installs the `tailwindcss` package and its Vite plugin (`@tailwindcss/vite`) along with their peer dependencies using npm, which are essential for integrating Tailwind CSS with a Vite-powered AdonisJS project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/adonisjs LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Configure Vite Plugin for Tailwind CSS DESCRIPTION: Modifies the `vite.config.ts` file to import and include the `@tailwindcss/vite` plugin in the Vite configuration, enabling Tailwind CSS processing during the build. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/sveltekit LANGUAGE: TypeScript CODE: ``` import { sveltekit } from '@sveltejs/kit/vite'; import { defineConfig } from 'vite'; import tailwindcss from '@tailwindcss/vite'; export default defineConfig({ plugins: [ tailwindcss(), sveltekit(), ], }); ``` ---------------------------------------- TITLE: Install Tailwind CSS and PostCSS dependencies via npm DESCRIPTION: This command installs Tailwind CSS, its PostCSS plugin, and other necessary PostCSS utilities as project dependencies, enabling Tailwind's styling capabilities within the Meteor application. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/meteor LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/postcss postcss postcss-load-config ``` ---------------------------------------- TITLE: Install Tailwind CSS and Vite plugin for Astro DESCRIPTION: Installs the core `tailwindcss` package and its official Vite plugin (`@tailwindcss/vite`) along with their peer dependencies via npm, which are required for Astro integration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/astro LANGUAGE: Shell CODE: ``` npm install tailwindcss @tailwindcss/vite ``` ---------------------------------------- TITLE: Configure Tailwind plugin in Phoenix DESCRIPTION: Configure the Tailwind plugin in your `config/config.exs` file. This configuration specifies the desired Tailwind CSS version and defines the input and output paths for your CSS assets within the Phoenix project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Elixir CODE: ``` config :tailwind, version: "4.1.10", myproject: [ args: ~w( --input=assets/css/app.css --output=priv/static/assets/app.css ), cd: Path.expand("..", __DIR__) ] ``` ---------------------------------------- TITLE: Import Tailwind CSS into main CSS file DESCRIPTION: Create an `./app/assets/css/main.css` file and add an `@import` rule to include Tailwind CSS. This file will serve as the entry point for Tailwind's styles in your application. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nuxt LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Update Phoenix deployment script for Tailwind DESCRIPTION: Modify the `assets.deploy` alias in your `mix.exs` file to include the Tailwind CSS build command. This ensures that your CSS is compiled and minified as part of the deployment process. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Elixir CODE: ``` defp aliases do [ # … "assets.deploy": [ "tailwind myproject --minify", "esbuild myproject --minify", "phx.digest" ] ]end ``` ---------------------------------------- TITLE: Import Tailwind CSS into global stylesheet DESCRIPTION: Creates a new global CSS file (e.g., `./src/styles/global.css`) and adds an `@import` rule to include the Tailwind CSS base styles, components, and utilities. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/astro LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Configure PostCSS to use the Tailwind CSS plugin DESCRIPTION: This JavaScript configuration file (`postcss.config.mjs`) sets up PostCSS to include the `@tailwindcss/postcss` plugin, enabling Tailwind CSS processing for your project's styles. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/nextjs LANGUAGE: JavaScript CODE: ``` const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config; ``` ---------------------------------------- TITLE: Enable Tailwind watcher in Phoenix development DESCRIPTION: Add the Tailwind watcher to the list of development watchers in your `config/dev.exs` file. This setup automatically recompiles your Tailwind CSS whenever changes are detected during development. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/phoenix LANGUAGE: Elixir CODE: ``` watchers: [ # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) esbuild: {Esbuild, :install_and_run, [:myproject, ~w(--sourcemap=inline --watch)]}, tailwind: {Tailwind, :install_and_run, [:myproject, ~w(--watch)]} ] ``` ---------------------------------------- TITLE: Apply Tailwind CSS classes with a custom prefix in HTML DESCRIPTION: Demonstrates how to use a custom prefix (e.g., `tw:`) with Tailwind CSS utility classes directly in HTML elements. SOURCE: https://tailwindcss.com/docs/upgrade-guide LANGUAGE: html CODE: ```
``` ---------------------------------------- TITLE: Configure Tailwind CSS PostCSS Plugin DESCRIPTION: Create a `postcss.config.mjs` file at the root of your project. This configuration file registers the `@tailwindcss/postcss` plugin, allowing PostCSS to process and optimize your CSS with Tailwind. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: JavaScript CODE: ``` export default { plugins: { "@tailwindcss/postcss": {} } }; ``` ---------------------------------------- TITLE: Tailwind CSS Grid Auto-Flow Utility Example DESCRIPTION: This example demonstrates how to apply Tailwind CSS `grid-auto-flow` utilities within an HTML `div` element. It shows the use of `grid-flow-col` for column-based auto-placement and `md:grid-flow-row` to responsively change the auto-flow to row-based on medium screens and above. SOURCE: https://tailwindcss.com/docs/grid-auto-flow LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Basic Tailwind CSS break-after Usage DESCRIPTION: This example demonstrates how to apply `break-after-column` to an element within a multi-column layout to force a column break after it. It shows the basic syntax for controlling content flow. SOURCE: https://tailwindcss.com/docs/break-after LANGUAGE: HTML CODE: ```

Well, let me tell you something, ...

Sure, go ahead, laugh...

Maybe we can live without...

Look. If you think this is...

``` ---------------------------------------- TITLE: Apply Tailwind CSS nth-last-child variant DESCRIPTION: Styles an element at a specific position counting from the end among its siblings. This example applies margins to specific or patterned anchor tags, starting from the last one. SOURCE: https://tailwindcss.com/docs/hover-focus-and-other-states LANGUAGE: html CODE: ``` ``` ---------------------------------------- TITLE: Apply Tailwind CSS classes in an Astro component DESCRIPTION: Demonstrates how to import the global CSS file into an Astro component's frontmatter and then apply Tailwind CSS utility classes directly to HTML elements for styling. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/astro LANGUAGE: Astro CODE: ``` ---import "../styles/global.css";---

Hello world!

``` ---------------------------------------- TITLE: Import Tailwind CSS in global.css DESCRIPTION: Creates a new CSS file, typically `./src/styles/global.css`, and imports the Tailwind CSS directives. This makes all of Tailwind's utility classes available for use throughout the project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/gatsby LANGUAGE: css CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Import application CSS into Ember app DESCRIPTION: Modifies the `./app/app.js` file to import the newly created `./app/app.css` file. This ensures that your main application stylesheet, including Tailwind CSS, is loaded and applied when the Ember application starts. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/emberjs LANGUAGE: JavaScript CODE: ``` import Application from '@ember/application';import Resolver from 'ember-resolver';import loadInitializers from 'ember-load-initializers';import config from 'my-project/config/environment';import 'my-project/app.css';export default class App { modulePrefix = config.modulePrefix; podModulePrefix = config.podModulePrefix; Resolver = Resolver;}loadInitializers(App, config.modulePrefix); ``` ---------------------------------------- TITLE: Import Tailwind CSS into Main Stylesheet DESCRIPTION: Adds an `@import` statement to `style.css` to include the core Tailwind CSS styles, making them available for use in the project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/vue LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Configure Tailwind CSS Vite plugin DESCRIPTION: Add the `@tailwindcss/vite` plugin to your `vite.config.ts` file. This step ensures that Vite processes Tailwind CSS correctly during the build process. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/laravel/vite LANGUAGE: typescript CODE: ``` import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig({ plugins: [ tailwindcss(), // … ], }) ``` ---------------------------------------- TITLE: Apply Tailwind CSS classes in Ember template DESCRIPTION: Demonstrates how to use Tailwind's utility classes directly within an Ember.js Handlebars template (`application.hbs`). This example applies `text-3xl`, `font-bold`, and `underline` to an `

` element to style its appearance. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/emberjs LANGUAGE: Handlebars CODE: ``` {{page-title "MyProject"}}

Hello world!

{{outlet}} ``` ---------------------------------------- TITLE: Apply Responsive justify-items Utilities in HTML DESCRIPTION: This example demonstrates how to apply `justify-items` utilities responsively using Tailwind CSS. It shows how to set `justify-items-start` by default and `justify-items-center` for medium screen sizes and above, illustrating the use of breakpoint variants for adaptive layouts. SOURCE: https://tailwindcss.com/docs/justify-items LANGUAGE: HTML CODE: ```
``` ---------------------------------------- TITLE: Import Tailwind CSS into Main Stylesheet DESCRIPTION: Add an `@import` statement to your primary CSS file, typically `src/index.css`. This line imports Tailwind's base styles, components, and utilities into your project. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: CSS CODE: ``` @import "tailwindcss"; ``` ---------------------------------------- TITLE: Use Tailwind CSS Utility Classes in React Component DESCRIPTION: Demonstrates how to apply Tailwind's utility classes directly within a React component's JSX. This example styles an `

` element with specific font size, weight, and text decoration. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/rspack/react LANGUAGE: JSX CODE: ``` export default function App() { return (

Hello world!

) } ``` ---------------------------------------- TITLE: Apply Tailwind CSS classes in a React component DESCRIPTION: Demonstrates how to use Tailwind's utility classes directly within a React component's `className` attribute. This example applies text size, font weight, and underline styles to an `

` element. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/gatsby LANGUAGE: javascript CODE: ``` export default function IndexPage() { return (

Hello world!

)} ``` ---------------------------------------- TITLE: Include compiled CSS and use Tailwind classes in Twig DESCRIPTION: Demonstrates how to include the compiled CSS from Webpack Encore in a Symfony Twig template using `encore_entry_link_tags('app')`. It also shows a basic example of applying Tailwind's utility classes to an HTML element. SOURCE: https://tailwindcss.com/docs/installation/framework-guides/symfony LANGUAGE: HTML CODE: ``` {% block stylesheets %} {{ encore_entry_link_tags('app') }} {% endblock %}

Hello world!

``` ---------------------------------------- TITLE: Update Tailwind CSS v4 Variant Stacking Order DESCRIPTION: Explains the change in variant stacking order from right-to-left (v3) to left-to-right (v4) to align with CSS syntax. Provides an HTML example demonstrating how to reverse the order of order-sensitive stacked variants for migration. SOURCE: https://tailwindcss.com/docs/upgrade-guide LANGUAGE: HTML CODE: ```