Installation
Get started with _tw
Generate your custom theme, install it in WordPress and run your first Tailwind builds
Generate your custom theme
The quickest way to get started with _tw is to simply head to this website’s homepage and generate a Tailwind-optimized WordPress theme.
The generator offers a number of options. These ones may not be self-explanatory:
- Theme Name: The name of your theme in title case, with or without spaces. If the theme slug and function prefix fields are both left blank, this field will be used to derive values for those fields.
- Theme Slug: A custom theme slug if the automatically generated one is not appropriate.
- Function Prefix: A custom function prefix if the automatically generated one is inappropriate (or, more often, too long). Please note that WordPress Coding Standards call for function prefixes of at least three characters.
All other fields provide metadata that will appear in the header comment at the beginning of the theme’s style.css
file.
Move your theme into place
After unzipping your generated theme archive, you should move it into the correct folder.
The easiest and quickest way to get started is simply to move your generated theme folder into the wp-content/themes
folder in your local development environment.
Depending on your requirements, you may want to move your generated theme folder elsewhere in your local environment and then create a symbolic link from the theme
folder in your generated theme to wp-content/themes/[theme-slug]
.
Install Tailwind
Your first step before installing Tailwind is to install npm if you haven’t already. After that, open your terminal of choice, navigate to your generated theme folder and run:
npm install
With Tailwind now installed, you can then generate your style.css
file by running:
npm run dev
This creates a development build of your theme’s stylesheet.
All Documentation
- Quickstart
Get started quickly, and deploy to production sooner than you expect
Fundamentals
- 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
In Depth
- Using Tailwind Typography
Customize front-end and back-end typographic styles - JavaScript Bundling with esbuild
Install and bundle JavaScript libraries (very quickly) - Linting and Code Formatting
Catch bugs and stop thinking about formatting
Extras
- On Tailwind and WordPress
Understand how WordPress and Tailwind work together - 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