From a9cf461304ca90085e8d4cee9b81cf216fa7ceb9 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Feb 2026 19:43:27 +0000 Subject: [PATCH 1/2] Add @tailwindcss/webpack documentation and update framework guides - Add new "Using webpack" installation tab page with step-by-step guide for configuring @tailwindcss/webpack as a loader in webpack projects - Add webpack tab to installation layout alongside Vite, PostCSS, etc. - Update Next.js framework guide with PostCSS/webpack tab options - Update Gatsby framework guide with PostCSS/webpack tab options - Add breadcrumb for the new webpack installation page - Update framework guides CTA to mention the webpack loader option https://claude.ai/code/session_01JNJXkaygF6fwvXG7CiZrkF --- .../docs/installation/using-webpack/page.tsx | 5 + .../(tabs)/framework-guides/page.tsx | 3 +- .../docs/installation/(tabs)/layout.tsx | 1 + .../(tabs)/using-webpack/page.tsx | 149 ++++++++++++++++++ .../installation/framework-guides/gatsby.tsx | 63 +++++++- .../installation/framework-guides/nextjs.tsx | 63 +++++++- 6 files changed, 276 insertions(+), 8 deletions(-) create mode 100644 src/app/(docs)/@breadcrumb/docs/installation/using-webpack/page.tsx create mode 100644 src/app/(docs)/docs/installation/(tabs)/using-webpack/page.tsx diff --git a/src/app/(docs)/@breadcrumb/docs/installation/using-webpack/page.tsx b/src/app/(docs)/@breadcrumb/docs/installation/using-webpack/page.tsx new file mode 100644 index 000000000..06c4cdb9d --- /dev/null +++ b/src/app/(docs)/@breadcrumb/docs/installation/using-webpack/page.tsx @@ -0,0 +1,5 @@ +import { Breadcrumb } from "@/components/breadcrumb"; + +export default function Page() { + return ; +} diff --git a/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx b/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx index 92c5b4e85..a9b64e51e 100644 --- a/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx +++ b/src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx @@ -39,7 +39,8 @@ export default async function FrameworkGuides() { Don't see your framework of choice? Try using the{" "} Tailwind CLI, the{" "} - Vite plugin, or the{" "} + Vite plugin, the{" "} + webpack loader, or the{" "} PostCSS plugin instead. diff --git a/src/app/(docs)/docs/installation/(tabs)/layout.tsx b/src/app/(docs)/docs/installation/(tabs)/layout.tsx index 53fbc0444..4897a0723 100644 --- a/src/app/(docs)/docs/installation/(tabs)/layout.tsx +++ b/src/app/(docs)/docs/installation/(tabs)/layout.tsx @@ -18,6 +18,7 @@ export const metadata: Metadata = { const tabs = { "Using Vite": "/docs/installation/using-vite", "Using PostCSS": "/docs/installation/using-postcss", + "Using webpack": "/docs/installation/using-webpack", "Tailwind CLI": "/docs/installation/tailwind-cli", "Framework Guides": "/docs/installation/framework-guides", "Play CDN": "/docs/installation/play-cdn", diff --git a/src/app/(docs)/docs/installation/(tabs)/using-webpack/page.tsx b/src/app/(docs)/docs/installation/(tabs)/using-webpack/page.tsx new file mode 100644 index 000000000..1b85d3e95 --- /dev/null +++ b/src/app/(docs)/docs/installation/(tabs)/using-webpack/page.tsx @@ -0,0 +1,149 @@ +import { Cta } from "@/components/cta"; +import { type Step, Steps } from "@/components/installation-steps"; +import dedent from "dedent"; +import { Metadata } from "next"; + +export const metadata: Metadata = { + title: "Installing Tailwind CSS with webpack", + description: + "Installing Tailwind CSS as a webpack loader is the most seamless way to integrate it with webpack-based projects.", + openGraph: { + type: "article", + title: "Installing with webpack", + description: "Integrate Tailwind CSS as a webpack loader.", + images: "https://tailwindcss.com/api/og?path=/docs/installation/using-webpack", + url: "https://tailwindcss.com/docs/installation/using-webpack", + }, +}; + +const steps: Step[] = [ + { + title: "Install Tailwind CSS", + body: ( +

+ Install tailwindcss, @tailwindcss/webpack, and other webpack dependencies via npm. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: dedent` + npm install tailwindcss @tailwindcss/webpack mini-css-extract-plugin css-loader + `, + }, + }, + { + title: "Configure webpack", + body: ( +

+ Add @tailwindcss/webpack as a loader in your webpack.config.js file, along with{" "} + css-loader and MiniCssExtractPlugin for extracting your CSS. +

+ ), + code: { + name: "webpack.config.js", + lang: "js", + code: dedent` + const MiniCssExtractPlugin = require('mini-css-extract-plugin') + + module.exports = { + plugins: [new MiniCssExtractPlugin()], + module: { + rules: [ + { + test: /\\.css$/i, + // [!code highlight:2] + use: [MiniCssExtractPlugin.loader, 'css-loader', '@tailwindcss/webpack'], + }, + ], + }, + } + `, + }, + }, + { + title: "Import Tailwind CSS", + body: ( +

+ Add an @import to your CSS file that imports Tailwind CSS. +

+ ), + code: { + name: "CSS", + lang: "css", + code: dedent` + @import "tailwindcss"; + `, + }, + }, + { + title: "Start your build process", + body: ( +

+ Run your build process with npx webpack serve or whatever command is configured in your{" "} + package.json file. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: dedent` + npx webpack serve + `, + }, + }, + { + title: "Start using Tailwind in your HTML", + body: ( +

+ Make sure your compiled CSS is included in the {""}, then start using Tailwind's utility + classes to style your content. +

+ ), + code: { + name: "HTML", + lang: "html", + code: dedent` + + + + + + + + + + +

+ Hello world! +

+ + + `, + }, + }, +]; + +export default function Page() { + return ( + <> +
+

+ Installing Tailwind CSS as a webpack loader +

+

+ Installing Tailwind CSS as a webpack loader is the most seamless way to integrate it with webpack-based + projects. It replaces the need for PostCSS in your webpack build pipeline. +

+
+ +
+ + Are you stuck? Setting up Tailwind + with webpack can be a bit different across different build tools. Check our framework guides to see if we have + more specific instructions for your particular setup. + +
+ + ); +} diff --git a/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx b/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx index e70551148..e5ede05ff 100644 --- a/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx @@ -1,4 +1,4 @@ -import { astro, css, js, Page, shell, Step, Tile } from "./utils"; +import { css, js, Page, shell, Step, Tab, Tile } from "./utils"; import Logo from "@/docs/img/guides/gatsby.react.svg"; export let tile: Tile = { @@ -12,12 +12,23 @@ export let page: Page = { description: "Setting up Tailwind CSS in a Gatsby project.", }; +export let tabs: Tab[] = [ + { + slug: "postcss", + title: "Using PostCSS", + }, + { + slug: "webpack", + title: "Using webpack", + }, +]; + export let steps: Step[] = [ { title: "Create your project", body: (

- Start by creating a new Gatsby project if you don’t have one set up already. The most common approach is to use{" "} + Start by creating a new Gatsby project if you don't have one set up already. The most common approach is to use{" "} Gatsby CLI.

), @@ -31,6 +42,7 @@ export let steps: Step[] = [ }, }, { + tabs: ["postcss"], title: "Install Tailwind CSS", body: (

@@ -47,6 +59,23 @@ export let steps: Step[] = [ }, }, { + tabs: ["webpack"], + title: "Install Tailwind CSS", + body: ( +

+ Install @tailwindcss/webpack and its peer dependencies via npm. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm install tailwindcss @tailwindcss/webpack + `, + }, + }, + { + tabs: ["postcss"], title: "Enable the Gatsby PostCSS plugin", body: (

@@ -70,6 +99,7 @@ export let steps: Step[] = [ }, }, { + tabs: ["postcss"], title: "Configure PostCSS Plugins", body: (

@@ -90,6 +120,31 @@ export let steps: Step[] = [ `, }, }, + { + tabs: ["webpack"], + title: "Configure the webpack loader", + body: ( +

+ Create a gatsby-node.js file in the root of your project (or add to the existing one) and + configure the @tailwindcss/webpack loader. +

+ ), + code: { + name: "gatsby-node.js", + lang: "js", + code: js` + exports.onCreateWebpackConfig = ({ actions, getConfig }) => { + const config = getConfig() + config.module.rules.push({ + test: /\.css$/i, + // [!code highlight:2] + use: ['@tailwindcss/webpack'], + }) + actions.replaceWebpackConfig(config) + } + `, + }, + }, { title: "Import Tailwind CSS", body: ( @@ -109,7 +164,7 @@ export let steps: Step[] = [ title: "Import the CSS file", body: (

- Create a gatsby-browser.js file at the root of your project if it doesn’t already exist, and import + Create a gatsby-browser.js file at the root of your project if it doesn't already exist, and import your newly-created ./src/styles/global.css file.

), @@ -138,7 +193,7 @@ export let steps: Step[] = [ }, { title: "Start using Tailwind in your project", - body:

Start using Tailwind’s utility classes to style your content.

, + body:

Start using Tailwind's utility classes to style your content.

, code: { name: "index.js", lang: "js", diff --git a/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx b/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx index edd390bd1..75025470c 100644 --- a/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx @@ -1,4 +1,4 @@ -import { css, js, shell, Page, Step, Tile } from "./utils"; +import { css, js, shell, Page, Step, Tab, Tile } from "./utils"; import Logo from "@/docs/img/guides/nextjs.react.svg"; import LogoDark from "@/docs/img/guides/nextjs-white.react.svg"; @@ -14,12 +14,23 @@ export let page: Page = { description: "Setting up Tailwind CSS in a Next.js project.", }; +export let tabs: Tab[] = [ + { + slug: "postcss", + title: "Using PostCSS", + }, + { + slug: "webpack", + title: "Using webpack", + }, +]; + export let steps: Step[] = [ { title: "Create your project", body: (

- Start by creating a new Next.js project if you don’t have one set up already. The most common approach is to use{" "} + Start by creating a new Next.js project if you don't have one set up already. The most common approach is to use{" "} Create Next App.

), @@ -33,6 +44,7 @@ export let steps: Step[] = [ }, }, { + tabs: ["postcss"], title: "Install Tailwind CSS", body: (

@@ -48,6 +60,23 @@ export let steps: Step[] = [ }, }, { + tabs: ["webpack"], + title: "Install Tailwind CSS", + body: ( +

+ Install @tailwindcss/webpack via npm. +

+ ), + code: { + name: "Terminal", + lang: "shell", + code: shell` + npm install tailwindcss @tailwindcss/webpack + `, + }, + }, + { + tabs: ["postcss"], title: "Configure PostCSS Plugins", body: (

@@ -70,6 +99,34 @@ export let steps: Step[] = [ `, }, }, + { + tabs: ["webpack"], + title: "Configure the webpack loader", + body: ( +

+ Add the @tailwindcss/webpack loader to your next.config.mjs file. +

+ ), + code: { + name: "next.config.mjs", + lang: "js", + code: js` + /** @type {import('next').NextConfig} */ + const nextConfig = { + // [!code highlight:9] + webpack(config) { + config.module.rules.push({ + test: /\.css$/i, + use: ['@tailwindcss/webpack'], + }) + return config + }, + } + + export default nextConfig + `, + }, + }, { title: "Import Tailwind CSS", body: ( @@ -102,7 +159,7 @@ export let steps: Step[] = [ }, { title: "Start using Tailwind in your project", - body:

Start using Tailwind’s utility classes to style your content.

, + body:

Start using Tailwind's utility classes to style your content.

, code: { name: "page.tsx", lang: "jsx", From 2321c55dac12a3aa52400bc62ce0233cb4c7d313 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 18 Feb 2026 20:08:42 +0000 Subject: [PATCH 2/2] Make webpack the default tab for Next.js and Gatsby guides https://claude.ai/code/session_01JNJXkaygF6fwvXG7CiZrkF --- .../(docs)/docs/installation/framework-guides/gatsby.tsx | 8 ++++---- .../(docs)/docs/installation/framework-guides/nextjs.tsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx b/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx index e5ede05ff..4bd9570e9 100644 --- a/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/gatsby.tsx @@ -13,14 +13,14 @@ export let page: Page = { }; export let tabs: Tab[] = [ - { - slug: "postcss", - title: "Using PostCSS", - }, { slug: "webpack", title: "Using webpack", }, + { + slug: "postcss", + title: "Using PostCSS", + }, ]; export let steps: Step[] = [ diff --git a/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx b/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx index 75025470c..b93898174 100644 --- a/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx +++ b/src/app/(docs)/docs/installation/framework-guides/nextjs.tsx @@ -15,14 +15,14 @@ export let page: Page = { }; export let tabs: Tab[] = [ - { - slug: "postcss", - title: "Using PostCSS", - }, { slug: "webpack", title: "Using webpack", }, + { + slug: "postcss", + title: "Using PostCSS", + }, ]; export let steps: Step[] = [