In Depth
Linting and Code Formatting
Catch bugs and stop thinking about formatting
After installing dependencies via npm and Composer, you’ll have a number of tools for linting and code formatting at your disposal:
I’ve become a much better developer by using linters, and removing the mental burden of code formatting is an easy way to increase your productivity (assuming you’re the sort of person to agonize about code formatting).
The tools above are used by _tw as follows:
ESLint
- Lints JavaScript files via code-quality rules that help you catch bugs.
- Performs class name ordering and enforces best practices for Tailwind classes added as attributes in your theme’s PHP files.
Prettier
- Formats JavaScript and CSS files.
- Performs class name ordering for Tailwind classes added via
@apply
in your theme’s CSS files.
PHP_CodeSniffer
- Lints PHP files via code-quality rules that help you catch bugs, with WordPress-specific rules from WordPress Coding Standards for PHP_CodeSniffer.
- Formats PHP files.
The combination above gives you robust linting and code formatting across your theme’s PHP, CSS and JavaScript files. You’ll also find a .editorconfig
file in your generated theme’s root directory based on the editor configuration used by WordPress core.
Via your editor
To get the most out of the tools above, you’ll probably want to use them via your editor. In VS Code, I use the following extensions:
In PhpStorm, I was able to duplicate my preferred linting and code formatting workflow from VS Code using only bundled plugins.
Via the command line
To run ESLint and Prettier from the command line, you can use the following npm commands:
npm run lint
npm run lint-fix
Code language: plaintext (plaintext)
For PHP_CodeSniffer, you can use:
composer run php:lint
composer run php:lint:autofix
Code language: plaintext (plaintext)
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