This repository tracks the output of the _tw WordPress starter theme generator with all options left blank.
Right now there isn't a public repository for the generator itself. Please post issues regarding the generator to this repository.
If you're starting a new project, the generator is the best way to do that. You can also read the documentation for more details.
Note
The default contents ofREADME.mdin a generated theme are as follows:
A custom theme based on _tw
- Move this folder to
wp-content/themesin your local development environment - Run
npm install && npm run devin this folder - Activate this theme in your local WordPress installation
Using WordPress Multisite? Don’t forget that your theme must first be enabled via the Network Admin in order to be available for activation on a network site.
- Run
npm run watch - Add Tailwind utility classes with abandon
- Run
npm run bundle - Upload the resulting zip file to your site using the “Upload Theme” button on the “Add Themes” administration page
Or deploy with the tool of your choice!
- Installation
Generate your custom theme, install it in WordPress and run your first Tailwind builds - Development
Watch for changes, build for production and learn more about how _tw, WordPress and Tailwind work together - Deployment
Share your new WordPress theme with the world - Troubleshooting
Find solutions to potential issues and answers to frequently asked questions
- Using Tailwind Typography
Customize front-end and back-end typographic styles - JavaScript Bundling with esbuild
Install and bundle JavaScript libraries (very quickly) - Adding custom fonts Host your fonts yourself or use a third party—and then add those fonts to your WordPress theme
- Linting and Code Formatting
Catch bugs and stop thinking about formatting - Keeping your theme up-to-date How to update (and whether or not you should)
- On Tailwind and WordPress
Understand how WordPress and Tailwind work together - Styling HTML from outside the theme Work with WordPress core, plugins and JavaScript libraries
- Managing Styles for Custom Blocks
Learn strategies for using Tailwind in theme-specific custom blocks - Setting Up Browsersync
Add live reloads and synchronized cross-device testing to your workflow
Note
The default contents ofREADME.mdend here.
All notable changes to this project will be documented here.
The format is based on Keep a Changelog.
- CSS-only Tailwind Typography
postcss-header, to support the build process fortailwind-intellisense.css, which improves Tailwind CSS language server support
postcss-url, now that thetransformAssetUrlsoption has landed in@tailwindcss/postcss
.npmrcfile to force the installation ofdevDependenciescssnano
typeis now set tomoduleinpackage.json- All
.mjsfiles renamed to.js
postcss-url, PostCSS Advanced Variables,postcss-import-ext-glob
- Minification (following migration from
@tailwindcss/clito@tailwindcss/postcss) - Rewritten asset paths in CSS files
- Overhaul and simplify
tailwind.css - Move Prettier config to
prettier.config.mjs - Limit block editor heading levels to
h2–h4 - Update theme file header
- PostCSS, PostCSS CLI and PostCSS Nesting
- Tailwind CLI
- New
theme.jsonintegration using Tailwind 4’s CSS configuration
- Update to Tailwind 4
- Update to ESLint 9
- PostCSS
- Glob-based imports via
postcss-import-ext-glob theme.jsonparsing via@_tw/themejsontheme.jsontriggering Tailwind rebuilds viachokidar-cliandtouch- Tailwind class name ordering in PHP files via
eslint-plugin-tailwindcss,@angular-eslint/template-parserandeslint-plugin-php-markup - Tailwind first-party plugins (
@tailwindcss/aspect-ratio,@tailwindcss/container-queriesand@tailwindcss/forms)
- Begin importing the contents of
./javascript/tailwind-typography-classes.jsfrom@_tw/typographyto./javascript/block-editor.js - Update ESLint configuration to allowlist classes beginning with
wp-blockandwp-element
./javascript/tailwind-typography-classes.js
- Update to Tailwind 3.4
- Support for block editor–only styles via
./tailwind/tailwind-editor-extra.css @_tw/typographyto improve Tailwind Typography support in the block editor via a custom fork- Custom color theme and font weight overrides in
./tailwind/tailwind-typography.config.js - A block style for Tailwind Typography’s
.leadstyle
- Refactored
./javascript/tailwind-typography-classes.js, adding new helper classes
- Tailwind Typography tweaks from
./tailwind/tailwind-typography.config.js @tailwindcss/typography(replacing it with the above-mentioned fork)
- Ensure changes to
theme.jsonupdatetailwind.config.jsduringwatchprocess (#79) - Support Yarn (#77)
- Support for block editor styles in WordPress 6.3 (#60)
- Automatic versioning in the zip file generated by
npm run bundle - More detailed documentation in
README.md
- Update to Tailwind 3.3
- Revisit approach to Tailwind Typography
- Improve comments throughout
@tailwindcss/line-clampandpostcss-simple-vars
@wordpress/prettier-configandeslint-config-prettier
- Use Prettier to format JavaScript files
- Install ESLint directly and use the
eslint:recommendedconfiguration - Set
ecmaVersiontolatestthroughout
@wordpress/eslint-plugin
- Update to Tailwind 3.2
- Revisit approach to Tailwind Typography
- Tailwind Typography support for comments
@tailwindcss/container-queries
- Finish restructuring theme files with improvements from Varia
- Update Tailwind Typography selector
- Clean up
package.jsonscripts
composer.lockandpackage-lock.jsonfiles
- Default theme support for core custom background and custom logo functionality
- Default setting for
content_width
- Update to Tailwind 3.1
- The postcss-import module, as its functionality is included with Tailwind 3.1
- Include a
style.cssfile containing only the WordPress file header - Add quickstart instructions to
README.md
- Update documentation to focus on installation without symlinking
- Update file header
- JavaScript build process using esbuild
- Tailwind plugin for Prettier (for use in CSS files)
- Tailwind plugin for eslint (for use in PHP files)
- A
componentsfolder, automatically including CSS files within - Support for nested declarations by default
- Tailwind Typography support for TinyMCE and the classic editor
- Restructure theme files with improvements from Varia
- Base
phpcs.xml.distupon WordPress Coding Standards sample file - Improve Tailwind Typography block editor support
- Customizer and Custom Header support
- Schema to
theme.jsonfile postcss-simple-varsto change CSS selectors based on build target
- Update
tailwind.config.jsfor Tailwind 3 - Move Tailwind Typography modifier classes into
tailwind/custom/components.css - Simplify Tailwind Typography configuration file
- Switch from @_tw/typography to @tailwindcss/typography
- Improve comments throughout
- Alpine.js
- Stylelint
- Separate configuration files for front-end and editor builds
- Use
.proseas our Typography selector
- Support for Tailwind Typography in the block editor
- Support for
theme.jsonin Tailwind - Styles for the block editor's content, wide and full widths
- A basic
theme.jsonfile - Classes for
entry-titleandentry-content
- There are now multiple .eslintrc files to handle the differences between node and browser linting
- Build process migrated from Laravel Mix to Tailwind's own CLI via
npm-run-all
- Repository made public with initial functionality