Download the PHP package drozzi-pro/wp-theme without Composer
On this page you can find all versions of the php package drozzi-pro/wp-theme. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package wp-theme
Boilerplate Wordpress Theme with Tailwindcss & Vite
Example of using Vite + TailwindCSS in Wordpress Theme development. Auto generating CSS, auto refresh on every file save/edit and easy production build tool with no hassle. Inspired by https://github.com/vitejs/vite/issues/341
Main features
- fast Auto browser refresh/sync file change/save
- built in Tailwindcss Just-in-time compiler
- extremely small CSS as there is no unsued css at all
- keep your local domain while developing
npm run build
for production packing Javascript and CSS
Installation (Node.js/npm required):
Clone or Unpack and copy folder to your Wordpress installation /wp-content/themes/ folder, or install theme via wp-admin by uploading .zip file and activate the theme. Then from your console or command prompt go to the theme folder and run npm install. Note: NodeJS is requred.
Quick commands:
Setup
Entry point file main.js is where you include all your scripts and styles. It can be changed via vite.config.json and functions.php.
Development with live preview/refresh
Ensure define("IS_VITE_DEVELOPMENT", true); exists in your wp-config.php or theme/plugin functions.php. Just run npm run dev and refresh your development website.
After Vite dev server is started open your installed Wordpress website in any browser or refresh it. Then you can start editing index.php, or any other php file in your theme, by adding elements and Tailwind classes. After saving changes your browser page eg your site should refresh immediately. You can freely edit asset files like styles.css, scripts.js too.
Production build
Just run npm run build, set defined IS_VITE_DEVELOPMENT to false and refresh local website.
Wordpress should load now production generated assets.
Note: To ensure classes used inside CMS to be processed just add them to safelist.txt and run build again.
Sass / Less
CSS Pre-processors are also supported by ViteJS
Please check link for details. https://vitejs.dev/guide/features#css-pre-processors
Note for httpS serving
If your local development domain is served via https:// then generating certificate for localhost usage and some changes in config are required
-
install mkcert utility and follow the instructions how to generate & install certificate https://github.com/FiloSottile/mkcert
- example on Windows 10 (PowerShell as Administrator)
- enable server.https option in vite.config.js
- change VITE_SERVER to https in your functions.php
Customizations
More info on the links below
Visual Studio Code Tailwind Intellisense plugin is a must. https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
That's it.
Happy coding! :)
Change log
v0.3.2
- Refresh speed improved (file search pattern fixed in tailwind.config.js)
- Package name changed
- Vite script loading logic moved to inc/inc.vite.php
- Homepage updated
- Hashed assets filenames on build, force reload not needed
v0.3.1
- Demo layout updated
- Hello World preview image replaced
- Package updates:
- postcss ^8.4.7 → ^8.4.12
- autoprefixer ^10.4.2 → ^10.4.4
- vite ^2.8.6 → ^2.9.1
v0.3.0
- Tailwindcss 3 config fixes
Packages updates:
- autoprefixer ^10.2.5 → ^10.4.2
- postcss ^8.2.14 → ^8.4.7
- postcss-nested ^5.0.5 → ^5.0.6
- tailwindcss ^2.1.2 → ^3.0.23
- vite ^2.2.4 → ^2.8.6
v0.2.7
- Tailwind updated to 2.2.16
- PostCSS updated to v8.3.8
- Autoprefixer updated to 10.3.6
- Vite updated to v2.6.2
v0.2.6
- Tailwind updated to 2.2.15
- Vite updated to v2.5.7
- Autoprefixer updated to 10.3.4
- PostCSS updated to v8.3.6
- PostCSS-Nested updated to 5.0.6
- IS_VITE_DEVELOPMENT check fix
v0.2.5
- PostCSS updated to v8.2.14
v0.2.4
- https solution added
- 404.php template file added
v0.2.3
- Vite updated to v2.2.4
- PostCSS updated to v8.2.13
- Tailwindcss updated to v2.1.2
- https option included into server vite.config.js
v0.2.2
- small workaround added in order Tailwindcss Intellisense to work
- postcss package updated to v8.2.10
- index.php splited into header.php & footer.php
- example page.php template with responsive container added
v0.2.1
- TailwindCSS updated to 2.1.1 (JIT is included in this version)
- experimental @tailwindcss/jit removed
- functions.php cleanup
- tailwind.config.js, mode 'JIT' added (v2.1.1)
- postcss.config.js updated
v0.1.0
- initial release