Add webpack installation guide and multi-tab support for frameworks

src/app/(docs)/@breadcrumb/docs/installation/using-webpack/page.tsx

@@ -0,0 +1,5 @@
+import { Breadcrumb } from "@/components/breadcrumb";
+
+export default function Page() {
+  return <Breadcrumb section="Getting Started" title="Using webpack" />;
+}

src/app/(docs)/docs/installation/(tabs)/framework-guides/page.tsx

@@ -39,7 +39,8 @@ export default async function FrameworkGuides() {
         <Cta>
           Don't see your framework of choice? Try using the{" "}
           <Link href="/docs/installation/tailwind-cli">Tailwind CLI</Link>, the{" "}
-          <Link href="/docs/installation/using-vite">Vite plugin</Link>, or the{" "}
+          <Link href="/docs/installation/using-vite">Vite plugin</Link>, the{" "}
+          <Link href="/docs/installation/using-webpack">webpack loader</Link>, or the{" "}
           <Link href="/docs/installation/using-postcss">PostCSS plugin</Link> instead.
         </Cta>
       </div>

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",

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: (
+      <p>
+        Install <code>tailwindcss</code>, <code>@tailwindcss/webpack</code>, and other webpack dependencies via npm.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: dedent`
+        npm install tailwindcss @tailwindcss/webpack mini-css-extract-plugin css-loader
+      `,
+    },
+  },
+  {
+    title: "Configure webpack",
+    body: (
+      <p>
+        Add <code>@tailwindcss/webpack</code> as a loader in your <code>webpack.config.js</code> file, along with{" "}
+        <code>css-loader</code> and <code>MiniCssExtractPlugin</code> for extracting your CSS.
+      </p>
+    ),
+    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: (
+      <p>
+        Add an <code>@import</code> to your CSS file that imports Tailwind CSS.
+      </p>
+    ),
+    code: {
+      name: "CSS",
+      lang: "css",
+      code: dedent`
+        @import "tailwindcss";
+      `,
+    },
+  },
+  {
+    title: "Start your build process",
+    body: (
+      <p>
+        Run your build process with <code>npx webpack serve</code> or whatever command is configured in your{" "}
+        <code>package.json</code> file.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: dedent`
+        npx webpack serve
+      `,
+    },
+  },
+  {
+    title: "Start using Tailwind in your HTML",
+    body: (
+      <p>
+        Make sure your compiled CSS is included in the <code>{"<head>"}</code>, then start using Tailwind's utility
+        classes to style your content.
+      </p>
+    ),
+    code: {
+      name: "HTML",
+      lang: "html",
+      code: dedent`
+        <!doctype html>
+        <html>
+        <head>
+          <meta charset="UTF-8">
+          <meta name="viewport" content="width=device-width, initial-scale=1.0">
+          <!-- [!code highlight:2] -->
+          <link href="/dist/main.css" rel="stylesheet">
+        </head>
+        <body>
+          <!-- [!code highlight:4] -->
+          <h1 class="text-3xl font-bold underline">
+            Hello world!
+          </h1>
+        </body>
+        </html>
+      `,
+    },
+  },
+];
+
+export default function Page() {
+  return (
+    <>
+      <div id="content-wrapper" className="prose relative z-10 mb-10 max-w-3xl" data-content="true">
+        <h3 data-title="true" className="sr-only">
+          Installing Tailwind CSS as a webpack loader
+        </h3>
+        <p>
+          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.
+        </p>
+      </div>
+      <Steps steps={steps} />
+      <div className="my-4 md:my-16">
+        <Cta label="Explore our framework guides" href="/docs/installation/framework-guides">
+          <strong className="font-semibold text-gray-950 dark:text-white">Are you stuck?</strong> 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.
+        </Cta>
+      </div>
+    </>
+  );
+}

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: "webpack",
+    title: "Using webpack",
+  },
+  {
+    slug: "postcss",
+    title: "Using PostCSS",
+  },
+];
+
 export let steps: Step[] = [
   {
     title: "Create your project",
     body: (
       <p>
-        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{" "}
         <a href="https://www.gatsbyjs.com/docs/reference/gatsby-cli/#how-to-use-gatsby-cli">Gatsby CLI</a>.
       </p>
     ),
@@ -31,6 +42,7 @@ export let steps: Step[] = [
     },
   },
   {
+    tabs: ["postcss"],
     title: "Install Tailwind CSS",
     body: (
       <p>
@@ -47,6 +59,23 @@ export let steps: Step[] = [
     },
   },
   {
+    tabs: ["webpack"],
+    title: "Install Tailwind CSS",
+    body: (
+      <p>
+        Install <code>@tailwindcss/webpack</code> and its peer dependencies via npm.
+      </p>
+    ),
+    code: {
+      name: "Terminal",
+      lang: "shell",
+      code: shell`
+        npm install tailwindcss @tailwindcss/webpack
+      `,
+    },
+  },
+  {
+    tabs: ["postcss"],
     title: "Enable the Gatsby PostCSS plugin",
     body: (
       <p>
@@ -70,6 +99,7 @@ export let steps: Step[] = [
     },
   },
   {
+    tabs: ["postcss"],
     title: "Configure PostCSS Plugins",
     body: (
       <p>
@@ -90,6 +120,31 @@ export let steps: Step[] = [
       `,
     },
   },
+  {
+    tabs: ["webpack"],
+    title: "Configure the webpack loader",
+    body: (
+      <p>
+        Create a <code>gatsby-node.js</code> file in the root of your project (or add to the existing one) and
+        configure the <code>@tailwindcss/webpack</code> loader.
+      </p>
+    ),
+    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: (
       <p>
-        Create a <code>gatsby-browser.js</code> file at the root of your project if it doesn’t already exist, and import
+        Create a <code>gatsby-browser.js</code> file at the root of your project if it doesn't already exist, and import
         your newly-created <code>./src/styles/global.css</code> file.
       </p>
     ),
@@ -138,7 +193,7 @@ export let steps: Step[] = [
   },
   {
     title: "Start using Tailwind in your project",
-    body: <p>Start using Tailwind’s utility classes to style your content.</p>,
+    body: <p>Start using Tailwind's utility classes to style your content.</p>,
     code: {
       name: "index.js",
       lang: "js",