Minimal starter theme for WordPress with Tailwind CSS and Vite JS for Full Site Editing.

This theme is build for work with gutenberg. It's thinked for use concept of pattern. A example of pattern is in patterns directory. The theme.json is used for the settings of theme. The fonts pass by the new WP font loader. Not by CSS or TailwindCSS.

For use ViteJS

• https://github.com/WP-Performance/presswind-plugin

or disable lots of WP core functionality

• https://github.com/WP-Performance/deaktiver

This theme is developed for use Full Site Editing.

• PostCSS
• TailwindCSS - optional. You can use only postcss.
• ViteJS

• Node JS (>18)
• Npm, yarn, pnpm or Bun !

In the root of press-wind theme

Install dependencies

yarn or bun install

In your wp-config.php file, add :

# for dev
define('WP_ENV', 'development');
# for production
define('WP_ENV', 'production');

Launch dev mode

yarn dev

Build the assets

yarn build

The script and the style are automatically enqueued in theme. Code present in functions.php

/**
 * init assets front
 */
if (class_exists('PressWind\PWVite')) {

    \PressWind\PWVite::init(port: 3000, path: '');
    /**
     * init assets admin
     */
    \PressWind\PWVite::init(
        port: 4444,
        path: '/admin',
        position: 'editor',
        is_ts: false
    );
}

You must use @apply method for create the CSS style It's better for reusability of your code and the readability.

Example :

.site-header {
  @apply flex my-4 lg:my-10 lg:items-center lg:flex-row flex-col;
}

But you can use the method by the class attribute, if you prefer. Be careful to keep maintainable project.