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..4bd9570e9 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: "webpack", + title: "Using webpack", + }, + { + slug: "postcss", + title: "Using PostCSS", + }, +]; + 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..b93898174 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: "webpack", + title: "Using webpack", + }, + { + slug: "postcss", + title: "Using PostCSS", + }, +]; + 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",