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.md
in a generated theme are as follows:
A custom theme based on _tw
- Move this folder to
wp-content/themes
in your local development environment - Run
npm install && npm run dev
in 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.md
end here.
All notable changes to this project will be documented here.
The format is based on Keep a Changelog.
postcss-url
, PostCSS Advanced Variables,postcss-import-ext-glob
- Minification (following migration from
@tailwindcss/cli
to@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.json
integration using Tailwind 4’s CSS configuration
- Update to Tailwind 4
- Update to ESLint 9
- PostCSS
- Glob-based imports via
postcss-import-ext-glob
theme.json
parsing via@_tw/themejson
theme.json
triggering Tailwind rebuilds viachokidar-cli
andtouch
- Tailwind class name ordering in PHP files via
eslint-plugin-tailwindcss
,@angular-eslint/template-parser
andeslint-plugin-php-markup
- Tailwind first-party plugins (
@tailwindcss/aspect-ratio
,@tailwindcss/container-queries
and@tailwindcss/forms
)
- Begin importing the contents of
./javascript/tailwind-typography-classes.js
from@_tw/typography
to./javascript/block-editor.js
- Update ESLint configuration to allowlist classes beginning with
wp-block
andwp-element
./javascript/tailwind-typography-classes.js
- Update to Tailwind 3.4
- Support for block editor–only styles via
./tailwind/tailwind-editor-extra.css
@_tw/typography
to 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
.lead
style
- 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.json
updatetailwind.config.js
duringwatch
process (#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-clamp
andpostcss-simple-vars
@wordpress/prettier-config
andeslint-config-prettier
- Use Prettier to format JavaScript files
- Install ESLint directly and use the
eslint:recommended
configuration - Set
ecmaVersion
tolatest
throughout
@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.json
scripts
composer.lock
andpackage-lock.json
files
- 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.css
file 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
components
folder, 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.dist
upon WordPress Coding Standards sample file - Improve Tailwind Typography block editor support
- Customizer and Custom Header support
- Schema to
theme.json
file postcss-simple-vars
to change CSS selectors based on build target
- Update
tailwind.config.js
for 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
.prose
as our Typography selector
- Support for Tailwind Typography in the block editor
- Support for
theme.json
in Tailwind - Styles for the block editor's content, wide and full widths
- A basic
theme.json
file - Classes for
entry-title
andentry-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