Stars: 235
Forks: 39
Pull Requests: 4
Issues: 13
Watchers: 11
Last Updated: 2023-08-28 15:41:53
Wordpress + ViteJS + TailwindCSS development example theme, similar to Tailpress but without additional code added
License: GNU General Public License v3.0
Languages: CSS, JavaScript, PHP, Shell
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 vitejs/vite#341
npm run build
for production packing Javascript and CSSClone 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.
npm install
Quick commands:
# dev server start
npm run dev
# production build
npm run build
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.
# get styles
import "./assets/css/styles.css"
# get scripts
import "./assets/js/scripts.js"
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.
npm run dev
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.
Just run npm run build, set defined IS_VITE_DEVELOPMENT to false and refresh local website.
npm run build
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.
CSS Pre-processors are also supported by ViteJS
# .scss and .sass
npm add -D sass
# .less
npm add -D less
Please check link for details. https://vitejs.dev/guide/features#css-pre-processors
If your local development domain is served via https:// then generating certificate for localhost usage and some changes in config are required
# install mkcert
choco install mkcert
# global one time install
mkcert -install
# run in project/theme folder to create localhost-key.pem & localhost.pem
mkcert localhost
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! :)
Packages updates: