Add webpack installation guide and multi-tab support for frameworks#2456
Open
adamwathan wants to merge 2 commits intomainfrom
Open
Add webpack installation guide and multi-tab support for frameworks#2456adamwathan wants to merge 2 commits intomainfrom
adamwathan wants to merge 2 commits intomainfrom
Conversation
- 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
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds a new webpack installation guide for Tailwind CSS and introduces tabbed installation instructions for framework guides (Next.js and Gatsby), allowing users to choose between PostCSS and webpack setup methods.
Key Changes
New webpack installation guide: Created a standalone installation page (
using-webpack/page.tsx) with step-by-step instructions for integrating Tailwind CSS as a webpack loader, including webpack configuration, CSS imports, and build process setup.Tabbed framework guides: Updated Next.js and Gatsby framework guides to support multiple installation methods:
Tabtype andtabsexport to define available installation methodstabsproperty to individual steps to show/hide content based on selected tabnext.config.mjs, Gatsby webpack config ingatsby-node.js)Navigation updates:
Minor fixes: Corrected whitespace and formatting inconsistencies in existing framework guide files
Implementation Details
The tabbed interface allows framework guides to present both PostCSS and webpack installation paths, with steps conditionally displayed based on the selected tab. Each framework's webpack configuration is tailored to its specific build system (Next.js uses webpack hooks in config, Gatsby uses
gatsby-node.jsexports).https://claude.ai/code/session_01JNJXkaygF6fwvXG7CiZrkF