Skip to content

feat: add Tailwind CSS as a scaffold feature#718

Draft
aryanjasala wants to merge 3 commits into
feat/scaffold-enginefrom
feat/tailwind
Draft

feat: add Tailwind CSS as a scaffold feature#718
aryanjasala wants to merge 3 commits into
feat/scaffold-enginefrom
feat/tailwind

Conversation

@aryanjasala

Copy link
Copy Markdown
Member

The theme already enqueues Tailwind (the functions.php gate + Assets.php); what was missing was the build wiring and a switch. This adds Tailwind as a scaffold feature and hooks up the theme-token webpack plugin.

The enqueue already exists here (unlike the plugin skeleton), so it's one PR instead of a capability + feature split.

Gates GenerateTailwindThemePlugin (from @rtcamp/wp-tooling) on the entry
file src/css/frontend/tailwind.css, guard-requiring wp-tooling so the build
still works when it is absent. Dormant until the Tailwind feature creates
the entry.
Toggleable in manage mode: copies the entry CSS + PostCSS config and adds
the tailwindcss / @tailwindcss/postcss devDeps; detected via the entry
file. The build side lives in webpack.config.js.

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds an opt-in Tailwind CSS scaffold feature to the theme’s init/manage scaffolding so projects can enable Tailwind with build wiring (PostCSS + theme token generation) and a dedicated enable switch.

Changes:

  • Adds conditional GenerateTailwindThemePlugin wiring in the styles webpack config when src/css/frontend/tailwind.css exists.
  • Switches Tailwind enablement to an explicit ELEMENTARY_THEME_ENABLE_TAILWIND default (false) intended to be flipped by scaffolding/manage mode.
  • Introduces a tailwind scaffold feature that adds the Tailwind entry CSS + PostCSS config and installs Tailwind dev dependencies.

Reviewed changes

Copilot reviewed 2 out of 5 changed files in this pull request and generated 4 comments.

Show a summary per file
File Description
webpack.config.js Conditionally loads and runs the Tailwind theme-token generation plugin when the Tailwind entry file exists.
functions.php Sets the Tailwind enable constant default to false (scaffold feature flips it).
bin/scaffold.config.js Defines the tailwind optional feature (files/deps + toggling the enable constant).
bin/features/tailwind/tailwind.css Provides the scaffolded Tailwind v4 entry stylesheet that imports generated WP token mappings.
bin/features/tailwind/postcss.config.js Provides a scaffolded PostCSS config that wires @rtcamp/wp-tooling Tailwind config.

Comment thread webpack.config.js
Comment on lines +13 to +16
/**
* Tailwind (opt-in). Wired only when the entry file exists — the same gate
* functions.php uses to enqueue the compiled stylesheet.
*/
Comment thread webpack.config.js Outdated
Comment on lines +22 to +23
} catch ( err ) {
// @rtcamp/wp-tooling not installed; Tailwind stays off.
Comment thread functions.php
Comment on lines 37 to 39
if ( ! defined( 'ELEMENTARY_THEME_ENABLE_TAILWIND' ) ) {
define( 'ELEMENTARY_THEME_ENABLE_TAILWIND', file_exists( get_template_directory() . '/src/css/frontend/tailwind.css' ) );
define( 'ELEMENTARY_THEME_ENABLE_TAILWIND', false );
}
Comment thread functions.php
Comment on lines 37 to 39
if ( ! defined( 'ELEMENTARY_THEME_ENABLE_TAILWIND' ) ) {
define( 'ELEMENTARY_THEME_ENABLE_TAILWIND', file_exists( get_template_directory() . '/src/css/frontend/tailwind.css' ) );
define( 'ELEMENTARY_THEME_ENABLE_TAILWIND', false );
}
functions.php now defaults ELEMENTARY_THEME_ENABLE_TAILWIND to false (the
scaffold feature flips it); the webpack token plugin is still entry-file gated
at build time, and the wp-tooling catch only skips that plugin, not Tailwind
compilation.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants