Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wp-performance/press-wind
Starter theme WordPress with Tailwind CSS and Vite JS
https://github.com/wp-performance/press-wind
gutenberg gutenberg-compatible postcss tailwind-css tailwindcss vite vitejs wordpress wordpress-development wordpress-theme
Last synced: 2 months ago
JSON representation
Starter theme WordPress with Tailwind CSS and Vite JS
- Host: GitHub
- URL: https://github.com/wp-performance/press-wind
- Owner: WP-Performance
- License: mit
- Created: 2022-08-09T14:19:01.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-03T12:31:37.000Z (6 months ago)
- Last Synced: 2024-10-10T03:43:17.652Z (2 months ago)
- Topics: gutenberg, gutenberg-compatible, postcss, tailwind-css, tailwindcss, vite, vitejs, wordpress, wordpress-development, wordpress-theme
- Language: JavaScript
- Homepage: https://presswind-doc.wp-performance.com/
- Size: 2.3 MB
- Stars: 131
- Watchers: 4
- Forks: 10
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Press Wind FSE
Minimal starter theme for WordPress with Tailwind CSS and Vite JS for Full
Site Editing.
## Concept
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.
## plugins required
For use ViteJS
-
## Plugin recommended
or disable lots of WP core functionality
-
## PHP/HTML files
This theme is developed for use Full Site Editing.
## Dependencies
- [PostCSS](https://postcss.org/)
- [TailwindCSS](https://tailwindcss.com/) - optional. You can use only postcss or lightningCSS.
- [ViteJS](https://vitejs.dev/)
## Requirement
- Node JS (>18)
- Npm, yarn, pnpm or Bun !
## Quick Start
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');
```
### With Vitejs, you have a dev server include. When you change a file, the browser reload the page
## Scripts
Launch dev mode
```
yarn dev
```
Build the assets
```
yarn build
```
## Enqueue Scripts and Styles
The script and the style are automatically enqueued in theme.
Code present in functions.php
```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
);
}
```
## CSS writing style
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.**
## Screenshot
