Hello world!
``` -------------------------------- ### Start Tailwind CSS CLI Build Process with Watch Mode Source: https://v3.tailwindcss.com/docs/installation Executes the Tailwind CSS CLI to scan template files, process the input CSS, and generate an output CSS file. The `--watch` flag continuously monitors for changes and automatically rebuilds the CSS. ```terminal npx tailwindcss -i ./src/input.css -o ./src/output.css --watch ``` -------------------------------- ### Start the React development server Source: https://v3.tailwindcss.com/docs/guides/create-react-app Execute this command in your terminal to start the development server for your React application. This process watches for file changes, rebuilds your application, and serves it, allowing you to see your Tailwind-styled components in action. ```shell npm run start ``` -------------------------------- ### Create SvelteKit Project with npx Source: https://v3.tailwindcss.com/docs/guides/sveltekit Initializes a new SvelteKit project using `npx sv create` and navigates into the project directory. This command is typically the first step when starting a new SvelteKit application. ```bash npx sv create my-project cd my-project ``` -------------------------------- ### Initialize a new Astro project Source: https://v3.tailwindcss.com/docs/guides/astro This command creates a new Astro project directory with a specified name and then navigates into it, preparing your environment for further setup. It uses the `create astro` utility to scaffold the project. ```shell npm create astro@latest my-project cd my-project ``` -------------------------------- ### Start Phoenix build process with Tailwind CSS Source: https://v3.tailwindcss.com/docs/guides/phoenix Executes the `mix phx.server` command in the terminal. This command starts the Phoenix server and triggers the configured asset build processes, including Tailwind CSS compilation, making your application with integrated styles accessible. ```shell mix phx.server ``` -------------------------------- ### Create a new Angular project Source: https://v3.tailwindcss.com/docs/guides/angular This command uses the Angular CLI to initialize a new Angular project named 'my-project' and then navigates into the newly created directory. It's the prerequisite step before adding Tailwind CSS. ```Terminal ng new my-project cd my-project ``` -------------------------------- ### Start the Astro development server Source: https://v3.tailwindcss.com/docs/guides/astro Execute this command to launch your Astro project's local development server. This allows you to preview your changes in real-time as you develop, often with hot-reloading capabilities. ```shell npm run dev ``` -------------------------------- ### Configure Tailwind template paths in config Source: https://v3.tailwindcss.com/docs/installation/using-postcss Specify the paths to all template files in tailwind.config.js so Tailwind can scan them for class names and generate the appropriate CSS. This configuration includes content path patterns and theme extensions. ```javascript /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } ``` -------------------------------- ### Install Tailwind CSS and Astro integration Source: https://v3.tailwindcss.com/docs/guides/astro Run this command to install both the `tailwindcss` package and the `@astrojs/tailwind` integration. It also automatically generates a `tailwind.config.cjs` file, streamlining the setup process. ```shell npx astro add tailwind ``` -------------------------------- ### Install Tailwind CSS and dependencies with npm Source: https://v3.tailwindcss.com/docs/guides/angular Installs Tailwind CSS, PostCSS, and Autoprefixer as development dependencies using npm. Afterward, it runs the `init` command to generate a `tailwind.config.js` file, which is crucial for configuring Tailwind. ```Terminal npm install -D tailwindcss@3 postcss autoprefixer npx tailwindcss init ``` -------------------------------- ### Start Tailwind CSS Build Process Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails This command initiates the build process for your Rails application, including Tailwind CSS. It typically watches for changes and recompiles assets as needed for development. ```Terminal ./bin/dev ``` -------------------------------- ### Create a new Qwik project Source: https://v3.tailwindcss.com/docs/guides/qwik Start a new Qwik application by using the `npm create qwik` command, which scaffolds a fresh project structure. After creation, navigate into the new project directory. ```Terminal npm create qwik@latest my-project cd my-project ``` -------------------------------- ### HTML Example with Various Tailwind CSS Classes Source: https://v3.tailwindcss.com/docs/content-configuration This HTML snippet demonstrates a layout styled with multiple Tailwind CSS utility classes. Tailwind scans such attributes to identify class names for inclusion in the final CSS bundle. ```html
Marketing
Finding customers for your new business
Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.
` element.
```HTML
Hello world!
```
--------------------------------
### Install Tailwind CSS v3.0 with Official Plugins
Source: https://v3.tailwindcss.com/docs/upgrade-guide
Install Tailwind CSS v3.0 along with all first-party plugins (@tailwindcss/typography, @tailwindcss/forms, @tailwindcss/aspect-ratio, @tailwindcss/line-clamp) and required dependencies. All plugins must be updated to the latest version simultaneously to avoid version constraint errors.
```bash
npm install -D tailwindcss@latest \
@tailwindcss/typography@latest \
@tailwindcss/forms@latest \
@tailwindcss/aspect-ratio@latest \
@tailwindcss/line-clamp@latest \
postcss@latest \
autoprefixer@latest
```
--------------------------------
### Start the Webpack build process for development
Source: https://v3.tailwindcss.com/docs/guides/symfony
This command initiates the asset compilation process managed by Webpack Encore, typically in watch mode for development. It compiles your CSS and JavaScript, applying Tailwind CSS transformations.
```bash
npm run watch
```
--------------------------------
### Create Nuxt Project with CLI
Source: https://v3.tailwindcss.com/docs/guides/nuxtjs
Initialize a new Nuxt project using the Nuxt Command Line Interface. This creates the base project structure needed before installing Tailwind CSS dependencies.
```bash
npx nuxi init my-project
cd my-project
```
--------------------------------
### Add Play CDN Script to HTML
Source: https://v3.tailwindcss.com/docs/installation/play-cdn
Load Tailwind CSS directly in the browser using the Play CDN script tag. This minimal setup enables immediate use of Tailwind utility classes for styling without any build process. Ideal for quick prototyping and development-only usage.
```html
Hello world!
```
--------------------------------
### Create SolidJS Project with Vite Template
Source: https://v3.tailwindcss.com/docs/guides/solidjs
Initialize a new SolidJS project using the official Vite template. This command creates a project directory and installs necessary dependencies for SolidJS development.
```bash
npx degit solidjs/templates/js my-project
cd my-project
```
--------------------------------
### Create Remix Project with create-remix
Source: https://v3.tailwindcss.com/docs/guides/remix
Initialize a new Remix project using the create-remix scaffolding tool. This command creates a new directory and sets up the basic Remix project structure with all necessary dependencies.
```bash
npx create-remix@latest my-project
cd my-project
```
--------------------------------
### Configure Tailwind CSS Template Paths
Source: https://v3.tailwindcss.com/docs/installation
Updates the `tailwind.config.js` file to specify the paths to all template files (e.g., HTML, JavaScript) that Tailwind CSS should scan for utility classes. This ensures Tailwind knows where to find and process classes.
```javascript
/** @type {import('tailwindcss').Config} */
export default {
> content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
```
--------------------------------
### Create a new React project with Create React App
Source: https://v3.tailwindcss.com/docs/guides/create-react-app
This command initializes a new React application named 'my-project' using Create React App v5.0+ and then navigates into the newly created project directory. Ensure you have Node.js and npm/npx installed to execute this.
```shell
npx create-react-app my-project
cd my-project
```
--------------------------------
### Customize Tailwind Configuration with Theme Extension
Source: https://v3.tailwindcss.com/docs/installation/play-cdn
Extend the default Tailwind theme by modifying the `tailwind.config` object to add custom design tokens such as colors. This example demonstrates adding a custom color palette that can be applied via utility classes throughout the HTML.
```html
Hello world!
```
--------------------------------
### Configure Tailwind plugin in config.exs
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Configures the Tailwind plugin in the `config.exs` file, specifying the desired Tailwind CSS version, the path to the `tailwind.config.js` file, and custom asset input/output paths. This setup dictates how Tailwind CSS processes and bundles the project's styles.
```elixir
config :tailwind, version: "3.4.17", default: [
args: ~w(
--config=tailwind.config.js
--input=css/app.css
--output=../priv/static/assets/app.css
),
cd: Path.expand("../assets", __DIR__)
]
```
--------------------------------
### Create New Laravel Project with Composer
Source: https://v3.tailwindcss.com/docs/guides/laravel
Initialize a new Laravel project using Composer's create-project command. This sets up the basic Laravel application structure and installs core dependencies.
```bash
composer create-project laravel/laravel my-project
cd my-project
```
--------------------------------
### Start Parcel Build Process with Tailwind CSS
Source: https://v3.tailwindcss.com/docs/guides/parcel
This command initiates Parcel's development server and build process by specifying the entry HTML file. Parcel will automatically compile the 'index.html' file and process any linked CSS, including the Tailwind CSS directives, for development.
```bash
npx parcel src/index.html
```
--------------------------------
### Starting and Ending Grid Lines with col-start and col-end in Tailwind CSS
Source: https://v3.tailwindcss.com/docs/grid-column
Shows how to use col-start-* and col-end-* utilities to position grid items at specific grid lines. The example demonstrates a 6-column grid where items are placed using line numbers (starting at 1). These utilities can be combined with col-span-* for precise control over element positioning.
```html
01
02
03
04
```
--------------------------------
### Install postcss-nesting for Standard CSS Nesting
Source: https://v3.tailwindcss.com/docs/using-with-preprocessors
Use this npm command to install `postcss-nesting` if you prefer to use the standard CSS Nesting specification instead of the default `postcss-nested` plugin bundled with `tailwindcss/nesting`.
```shell
npm install -D postcss-nesting
```
--------------------------------
### Enable First-Party Tailwind Plugins via CDN
Source: https://v3.tailwindcss.com/docs/installation/play-cdn
Load official Tailwind plugins directly from the CDN by appending the `plugins` query parameter to the script URL. Supported plugins include forms, typography, aspect-ratio, line-clamp, and container-queries for extended functionality.
```html
```
--------------------------------
### Install Tailwind CSS v3.0 with npm
Source: https://v3.tailwindcss.com/docs/upgrade-guide
Update Tailwind CSS, PostCSS, and autoprefixer to their latest versions using npm. Note that Tailwind CSS v3.0 requires PostCSS 8 and no longer supports PostCSS 7.
```bash
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```
--------------------------------
### Minify Tailwind CSS Output with CLI
Source: https://v3.tailwindcss.com/docs/optimizing-for-production
This command line interface example demonstrates how to minify the final CSS output generated by the Tailwind CSS CLI. By adding the `--minify` flag, the CSS build process automatically applies minification, reducing the file size for production deployments.
```shell
npx tailwindcss -o build.css --minify
```
--------------------------------
### Create New Rails Project
Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails
This command initializes a new Ruby on Rails project named 'my-project' and navigates into its directory, providing a clean slate for development.
```Terminal
rails new my-project
cd my-project
```
--------------------------------
### Install postcss-import Plugin
Source: https://v3.tailwindcss.com/docs/using-with-preprocessors
Install the postcss-import npm package as a dependency for handling @import statements at build time. This plugin processes CSS imports before browser execution, enabling organized stylesheet structure.
```bash
npm install -D postcss-import
```
--------------------------------
### Create Meteor Project
Source: https://v3.tailwindcss.com/docs/guides/meteor
Initialize a new Meteor project using the Meteor CLI. This creates the project directory structure and sets up the basic Meteor application framework.
```bash
meteor create my-project
cd my-project
```
--------------------------------
### Create a new Phoenix project in Terminal
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Initializes a new Phoenix project using the `mix phx.new` command and then navigates into the newly created project directory. This is the foundational step required before integrating Tailwind CSS into the application.
```shell
mix phx.new myproject
cd myproject
```
--------------------------------
### Tailwind CSS Snap Start - Horizontal Scrolling Image Gallery
Source: https://v3.tailwindcss.com/docs/scroll-snap-align
Implements a horizontally scrollable image gallery using Tailwind's snap-x and snap-start utilities. Elements snap to the start edge of the viewport when scrolling. This example uses unsplash image URLs and requires Tailwind CSS to be properly configured in the project.
```HTML
```
--------------------------------
### Create new Rspack project with CLI
Source: https://v3.tailwindcss.com/docs/guides/rspack
Initialize a new Rspack project using the official Rspack CLI tool. This command creates a basic project structure with all necessary configuration files.
```bash
npm create rspack@latest
```
--------------------------------
### Install Tailwind CSS and generate config file via npm
Source: https://v3.tailwindcss.com/docs/guides/create-react-app
This step installs Tailwind CSS as a development dependency in your project using npm. After installation, the 'npx tailwindcss init' command generates a basic 'tailwind.config.js' file in your project root, which is essential for Tailwind's configuration.
```shell
npm install -D tailwindcss@3
npx tailwindcss init
```
--------------------------------
### Install Autoprefixer via npm
Source: https://v3.tailwindcss.com/docs/browser-support
Command to install Autoprefixer as a development dependency. Autoprefixer is a PostCSS plugin that automatically adds vendor prefixes to CSS properties based on target browser specifications.
```bash
npm install -D autoprefixer
```
--------------------------------
### Reference Custom Keyframes in Animation Utilities
Source: https://v3.tailwindcss.com/docs/animation
Maps custom keyframes to animation utilities in the Tailwind theme. This example references the previously defined 'wiggle' keyframes and creates an animation utility with a 1-second duration and ease-in-out timing. The animation repeats infinitely.
```javascript
module.exports = {
theme: {
extend: {
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
}
}
}
}
```
--------------------------------
### Safelisting Tailwind CSS Core Plugins
Source: https://v3.tailwindcss.com/docs/configuration
This example shows how to explicitly enable a specific subset of core plugins by providing an array of plugin names to the `corePlugins` property. Only the plugins listed in the array will be generated, which is beneficial for projects with strict utility requirements or when building highly customized Tailwind setups.
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
corePlugins: [
'margin',
'padding',
'backgroundColor',
// ...
]
}
```
--------------------------------
### Correct Dynamic Tailwind Class Generation in HTML
Source: https://v3.tailwindcss.com/docs/content-configuration
This HTML example shows the recommended approach for dynamic Tailwind CSS classes by ensuring complete class names are conditionally rendered as full, unbroken strings. This allows Tailwind to correctly detect and generate all necessary styles.
```html
```
--------------------------------
### Tailwind CSS content-start Grid Alignment
Source: https://v3.tailwindcss.com/docs/align-content
Packs grid rows against the start of the cross axis using the content-start utility class. Creates a grid container with 3 columns, gap spacing, and rows aligned to the top. Equivalent to CSS align-content: flex-start property.
```html
01
02
03
04
05
```
--------------------------------
### Install Tailwind CSS CLI in Phoenix project
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Runs the `mix tailwind.install` command in the terminal. This command downloads the standalone Tailwind CLI executable and generates a `tailwind.config.js` file in the `./assets` directory, which is necessary for configuring Tailwind CSS.
```shell
mix tailwind.install
```
--------------------------------
### Initialize a New Parcel Project
Source: https://v3.tailwindcss.com/docs/guides/parcel
This command sequence creates a new directory, initializes an npm project, installs Parcel as a development dependency, and sets up a basic 'src' directory with an 'index.html' file to begin development.
```bash
mkdir my-project
cd my-project
npm init -y
npm install -D parcel
mkdir src
touch src/index.html
```
--------------------------------
### Create AdonisJS Project using npm
Source: https://v3.tailwindcss.com/docs/guides/adonisjs
This command initializes a new AdonisJS project named 'my-project' using the latest version of `@adonisjs/cli`. It sets up a web application kit. This is the foundational step before proceeding with Tailwind CSS integration.
```bash
npm init adonisjs@latest my-project -- --kit=webcd my-project
```
--------------------------------
### Create Ember.js Project with Ember CLI
Source: https://v3.tailwindcss.com/docs/guides/emberjs
Initialize a new Ember.js project with Embroider enabled for modern build tooling support. This command creates the project directory structure and configures the necessary dependencies.
```bash
npx ember-cli new my-project --embroider --no-welcome
cd my-project
```
--------------------------------
### Install Tailwind CSS and Dependencies via npm
Source: https://v3.tailwindcss.com/docs/guides/remix
Install Tailwind CSS v3 along with PostCSS and Autoprefixer as dev dependencies, then generate the required configuration files. The init command with --ts flag creates a TypeScript config and -p flag generates the PostCSS config.
```bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init --ts -p
```
--------------------------------
### Customize gridRowStart utilities in Tailwind theme
Source: https://v3.tailwindcss.com/docs/grid-row
Extend the gridRowStart section of your Tailwind theme to add custom row-start utilities. This example adds utilities for row start positions 8 through 13, enabling row-start-8, row-start-9, etc. classes in your HTML markup.
```javascript
module.exports = {
theme: {
extend: {
gridRowStart: {
'8': '8',
'9': '9',
'10': '10',
'11': '11',
'12': '12',
'13': '13',
}
}
}
}
```
--------------------------------
### Start Gatsby development server with Tailwind CSS
Source: https://v3.tailwindcss.com/docs/guides/gatsby
Run the 'gatsby develop' command in your terminal. This command starts the Gatsby development server, compiles your project with Tailwind CSS integrated, and allows you to view your application in a web browser.
```Terminal
gatsby develop
```
--------------------------------
### Install Tailwind CSS and PostCSS Dependencies for AdonisJS
Source: https://v3.tailwindcss.com/docs/guides/adonisjs
This command installs `tailwindcss`, `postcss`, and `autoprefixer` as development dependencies. Following the installation, it initializes Tailwind CSS, generating the necessary `tailwind.config.js` and `postcss.config.js` configuration files with the `-p` flag.
```bash
npm install -D tailwindcss@3 postcss autoprefixernpx tailwindcss init -p
```
--------------------------------
### Add Tailwind CSS watcher for Phoenix development
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Enables a Tailwind CSS watcher in the `dev.exs` configuration file. This setup automatically rebuilds your CSS whenever changes are detected in your project, providing a seamless development experience without manual recompilation.
```elixir
watchers: [
# Start the esbuild watcher by calling Esbuild.install_and_run(:default, args)
esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]},
tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}
]
```
--------------------------------
### Configuring Official Tailwind CSS Plugins in JavaScript
Source: https://v3.tailwindcss.com/docs/plugins
This example illustrates how to integrate official Tailwind CSS plugins into your project. After installing them via npm, you can include them in your `tailwind.config.js` file by using `require()` within the `plugins` array.
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
require('@tailwindcss/typography'),
require('@tailwindcss/forms'),
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/container-queries'),
]
}
```
--------------------------------
### Use Tailwind CSS Classes and PostCSS in Svelte Components
Source: https://v3.tailwindcss.com/docs/guides/sveltekit
Demonstrates how to apply Tailwind utility classes to HTML elements within a Svelte component and how to use PostCSS within a `
```
--------------------------------
### Install Tailwind CSS and Generate Configuration
Source: https://v3.tailwindcss.com/docs/guides/parcel
This command installs 'tailwindcss' and 'postcss' as development dependencies via npm. Afterwards, it initializes the Tailwind CSS configuration file ('tailwind.config.js') in your project root, which is essential for customizing Tailwind.
```bash
npm install -D tailwindcss@3 postcss
npx tailwindcss init
```
--------------------------------
### Install Tailwind CSS and Dependencies
Source: https://v3.tailwindcss.com/docs/guides/meteor
Install Tailwind CSS v3 and peer dependencies (postcss, autoprefixer) via npm. The init command generates required configuration files: tailwind.config.js and postcss.config.js.
```bash
npm install -D tailwindcss@3 postcss autoprefixer
npx tailwindcss init -p
```
--------------------------------
### Create Next.js project with TypeScript
Source: https://v3.tailwindcss.com/docs/guides/nextjs
Initialize a new Next.js project using Create Next App with TypeScript and ESLint support. This command generates a new project directory with necessary Next.js configuration files and development dependencies.
```bash
npx create-next-app@latest my-project --typescript --eslint
cd my-project
```
--------------------------------
### Tailwind CSS Place Content Start Grid Layout
Source: https://v3.tailwindcss.com/docs/place-content
Packs grid items against the start of the block axis using the place-content-start utility. Positions 4 items in a 2-column grid at the top of the container. Ideal for aligning content to the beginning of a grid container.
```html
01
02
03
04
```
--------------------------------
### Import Global CSS into SvelteKit Layout
Source: https://v3.tailwindcss.com/docs/guides/sveltekit
Creates a `./src/routes/+layout.svelte` file and imports the `app.css` file. This ensures that the global Tailwind CSS styles are applied across all pages rendered by this layout.
```html
Hello world!
```
--------------------------------
### Add Tailwind CSS directives to global stylesheet
Source: https://v3.tailwindcss.com/docs/guides/angular
Inserts the `@tailwind` directives into your `src/styles.css` file. These directives are processed by Tailwind CSS during the build step, injecting its base styles, components, and utilities into your application.
```CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
```
--------------------------------
### Apply break-before-column in Tailwind CSS
Source: https://v3.tailwindcss.com/docs/break-before
This example demonstrates how to use the `break-before-column` utility to force a column break before a specific element within a multi-column layout. It ensures the content following the element starts in a new column.
```html
Well, let me tell you something, ...
Sure, go ahead, laugh...
Maybe we can live without...
Look. If you think this is...
```
--------------------------------
### Define and Resolve Media Queries with Tailwind CSS screen() Function
Source: https://v3.tailwindcss.com/docs/functions-and-directives
This example demonstrates how to define a media query using the `screen()` function in Tailwind CSS, referencing a named breakpoint like 'sm'. It also illustrates how this concise syntax is resolved during the build process into a standard CSS media query with the corresponding pixel value, ensuring browser compatibility.
```css
@media screen(sm) {
/* ... */
}
```
```css
@media (min-width: 640px) {
/* ... */
}
```
--------------------------------
### Use Tailwind Utility Classes in SolidJS
Source: https://v3.tailwindcss.com/docs/guides/solidjs
Apply Tailwind CSS utility classes to JSX elements in your SolidJS components. This example demonstrates basic text styling using Tailwind's utility classes for font size, weight, and text decoration.
```javascript
export default function App() {
return (
Hello world!
)
}
```
--------------------------------
### Set Background Origin with Tailwind CSS Classes
Source: https://v3.tailwindcss.com/docs/background-origin
This example demonstrates the core `bg-origin-` utility classes in Tailwind CSS. It shows how `bg-origin-border`, `bg-origin-padding`, and `bg-origin-content` control the starting point of an element's background image rendering relative to its border, padding, or content box.
```html
```
--------------------------------
### Install Tailwind CSS and PostCSS Dependencies
Source: https://v3.tailwindcss.com/docs/guides/emberjs
Install Tailwind CSS v3, PostCSS, PostCSS loader, and Autoprefixer as dev dependencies. The init command generates both tailwind.config.js and postcss.config.js configuration files automatically.
```bash
npm install -D tailwindcss@3 postcss postcss-loader autoprefixer
npx tailwindcss init -p
```
--------------------------------
### Configure Tailwind CSS to scan template paths
Source: https://v3.tailwindcss.com/docs/index
This configuration within `tailwind.config.js` specifies the files that Tailwind CSS should scan for utility classes. By defining these content paths, Tailwind ensures that only the CSS classes actually used in your project's HTML and JavaScript templates are included in the final compiled output, optimizing file size.
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
```
--------------------------------
### Install Tailwind CSS Typography Plugin via npm
Source: https://v3.tailwindcss.com/docs/typography-plugin
Installs the official Tailwind CSS Typography plugin from npm for adding prose classes to your project. Run this command in your project directory to add the plugin as a development dependency.
```bash
npm install -D @tailwindcss/typography
```
--------------------------------
### Align Grid Items to Start with Tailwind CSS
Source: https://v3.tailwindcss.com/docs/place-items
Utilize the `place-items-start` utility class to align grid items to the beginning of their respective grid areas along both the row and column axes. This example demonstrates a basic grid container with three columns and uses `gap-4` for spacing between items.
```html
01
02
03
04
05
06
```
--------------------------------
### Configure Tailwind CSS template paths in tailwind.config.js
Source: https://v3.tailwindcss.com/docs/guides/create-react-app
Update your 'tailwind.config.js' file by adding paths to all your template files in the 'content' array. This configuration tells Tailwind CSS where to scan for class names to generate only the necessary CSS, optimizing file size. The example covers JavaScript, JSX, TypeScript, and TSX files within the 'src' directory.
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
--------------------------------
### Apply Basic Linear Gradients with Tailwind CSS
Source: https://v3.tailwindcss.com/docs/background-image
This example demonstrates how to create linear gradient backgrounds using Tailwind CSS `bg-gradient-to-*` utilities combined with color stop classes. These classes apply gradients from a starting color to an ending color across a specified direction, enhancing the visual design of HTML elements.
```html
```
--------------------------------
### Set Tailwind CSS Gradient Starting Color
Source: https://v3.tailwindcss.com/docs/gradient-color-stops
Use the `from-*` utilities to define the initial color of a Tailwind CSS gradient. This example sets a gradient starting from `indigo-500`.
```html
```
--------------------------------
### Configure PostCSS for Tailwind CSS Integration
Source: https://v3.tailwindcss.com/docs/guides/parcel
This snippet creates or modifies the '.postcssrc' file in your project root to include Tailwind CSS as a PostCSS plugin. This setup allows PostCSS to process Tailwind's directives and optimize your CSS during the build process.
```json
{
"plugins": {
"tailwindcss": {}
}
}
```
--------------------------------
### Install Tailwind CSS and PostCSS dependencies for Gatsby
Source: https://v3.tailwindcss.com/docs/guides/gatsby
Install necessary packages including 'tailwindcss', 'postcss', 'autoprefixer', and 'gatsby-plugin-postcss' as development dependencies using npm. Afterward, run the 'npx tailwindcss init -p' command to generate 'tailwind.config.js' and 'postcss.config.js' configuration files.
```Terminal
npm install -D tailwindcss@3 postcss autoprefixer gatsby-plugin-postcss
npx tailwindcss init -p
```
--------------------------------
### Example Output of Prefixed Tailwind CSS Classes
Source: https://v3.tailwindcss.com/docs/configuration
This CSS output demonstrates how Tailwind CSS utility classes are generated with a `tw-` prefix after configuring the `prefix` option. It shows basic text alignment classes with the applied prefix.
```css
.tw-text-left {
text-align: left;
}
.tw-text-center {
text-align: center;
}
.tw-text-right {
text-align: right;
}
/* etc. */
```
--------------------------------
### Install Tailwind CSS Rails Gem
Source: https://v3.tailwindcss.com/docs/guides/ruby-on-rails
These commands add the `tailwindcss-rails` gem to your Rails project and then run the installation script, which generates the necessary `tailwind.config.js` file for Tailwind CSS configuration.
```Terminal
./bin/bundle add tailwindcss-rails
./bin/rails tailwindcss:install
```
--------------------------------
### Add Tailwind plugin to Phoenix dependencies
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Adds the `tailwind` plugin to the `deps` function within the `mix.exs` file. The plugin is configured to be active only in the development environment. After adding the dependency, run `mix deps.get` to fetch and install it.
```elixir
defp deps do
[
{:tailwind, "~> 0.1", runtime: Mix.env() == :dev}
]
end
```
--------------------------------
### Create a new Gatsby project using Gatsby CLI
Source: https://v3.tailwindcss.com/docs/guides/gatsby
Initialize a new Gatsby project by running the 'gatsby new' command, which sets up a basic project structure, and then navigate into the new project directory to begin development.
```Terminal
gatsby new my-project
cd my-project
```
--------------------------------
### Refine Tailwind CSS Content Paths to Prevent Infinite Loops
Source: https://v3.tailwindcss.com/docs/content-configuration
To prevent infinite rebuild loops, this `tailwind.config.js` example shows how to use more specific content paths. By explicitly listing directories like `./src/pages` and `./src/components`, it ensures that only relevant template files are watched, avoiding accidental watching of CSS output files or other build artifacts.
```javascript
module.exports = {
content: [
'./src/**/*.{html,js}',
'./src/pages/**/*.{html,js}',
'./src/components/**/*.{html,js}',
'./src/layouts/**/*.{html,js}',
'./src/index.html',
],
// ...
}
```
--------------------------------
### Pulse Animation for Skeleton Loaders
Source: https://v3.tailwindcss.com/docs/animation
Implements the animate-pulse utility to create a gentle fade in and out effect on placeholder elements. Demonstrates skeleton loader layouts for both light and dark themes using grid structures.
```html
```
--------------------------------
### Install Webpack Encore bundle in Symfony
Source: https://v3.tailwindcss.com/docs/guides/symfony
This command uses Composer to install the 'symfony/webpack-encore-bundle', which is essential for managing and building front-end assets in Symfony applications. It integrates Webpack for asset compilation.
```bash
composer require symfony/webpack-encore-bundle
```
--------------------------------
### Configure Tailwind CSS Content Paths for SvelteKit
Source: https://v3.tailwindcss.com/docs/guides/sveltekit
Updates the `tailwind.config.js` file to specify the paths of template files that Tailwind CSS should scan for utility classes. This ensures that unused CSS is purged and only necessary styles are included in the final build.
```javascript
/** @type {import('tailwindcss').Config} */
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};
```
--------------------------------
### Apply row-span on Hover State
Source: https://v3.tailwindcss.com/docs/grid-row
Use hover variant modifiers to conditionally apply row-span utilities on user interaction. This example applies row-span-3 by default and increases to row-span-4 on hover.
```html
```
--------------------------------
### Add Custom CSS with Tailwind Directives
Source: https://v3.tailwindcss.com/docs/installation/play-cdn
Define custom CSS utilities using the `@layer` directive within a `
```
--------------------------------
### Extend Animation with Custom Speed in Tailwind Config
Source: https://v3.tailwindcss.com/docs/animation
Adds a custom animation utility to the Tailwind theme by extending the animation property. This example creates a 'spin-slow' animation that applies the spin keyframes at a slower 3-second duration. The configuration is added to the extend section to preserve default animations while adding new ones.
```javascript
module.exports = {
theme: {
extend: {
animation: {
'spin-slow': 'spin 3s linear infinite',
}
}
}
}
```
--------------------------------
### Use Tailwind Utility Classes in Vue Template
Source: https://v3.tailwindcss.com/docs/guides/nuxtjs
Apply Tailwind CSS utility classes directly to HTML elements in Vue templates. This example demonstrates text sizing, font weight, and text decoration utilities.
```vue
Hello world!
```
--------------------------------
### Configure Tailwind CSS template paths in tailwind.config.js
Source: https://v3.tailwindcss.com/docs/guides/angular
Modifies the `tailwind.config.js` file to include paths to all template files where Tailwind CSS utility classes will be used. This allows Tailwind to scan and generate only the necessary CSS.
```JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {},
},
plugins: [],
}
```
--------------------------------
### Configure Phoenix deployment script for assets
Source: https://v3.tailwindcss.com/docs/guides/phoenix
Modifies the `aliases` function in `mix.exs` to include `tailwind default --minify` as part of the `assets.deploy` alias. This ensures that Tailwind CSS is automatically built and minified during the deployment process, optimizing asset delivery for production.
```elixir
defp aliases do
[
setup: ["deps.get", "ecto.setup"],
"ecto.setup": ["ecto.create", "ecto.migrate", "run priv/repo/seeds.exs"],
"ecto.reset": ["ecto.drop", "ecto.setup"],
test: ["ecto.create --quiet", "ecto.migrate --quiet", "test"],
"assets.deploy": ["tailwind default --minify", "esbuild default --minify", "phx.digest"]
]
end
```
--------------------------------
### Explicitly Fade Tailwind CSS Gradient to Transparent
Source: https://v3.tailwindcss.com/docs/gradient-color-stops
This example shows how to explicitly fade a Tailwind CSS gradient to transparent using `to-transparent`. While generally not recommended, it defines a gradient starting from blue and ending transparently.
```html
```
--------------------------------
### Responsive Animation with Media Query Breakpoints
Source: https://v3.tailwindcss.com/docs/animation
Demonstrates applying animations conditionally at specific responsive breakpoints using variant modifiers like md:animate-spin. The animation activates only at medium screen sizes and above.
```html
```
--------------------------------
### Tailwind CSS place-self-start Grid Alignment
Source: https://v3.tailwindcss.com/docs/place-self
Align a grid item to the start on both axes using the place-self-start utility class. Positions the element at the beginning of both row and column tracks.
```html
01
02
03
04
05
06
```
01
02
03
04
01
02
03
04
05
01
02
03
04
Well, let me tell you something, ...
Sure, go ahead, laugh...
Maybe we can live without...
Look. If you think this is...
01
02
03
04
05
06
01
02
03
04
05
06