{"id":14977029,"url":"https://github.com/blonestar/wp-theme-vite-tailwind","last_synced_at":"2025-04-05T13:09:44.354Z","repository":{"id":47814113,"uuid":"353628418","full_name":"blonestar/wp-theme-vite-tailwind","owner":"blonestar","description":"Wordpress + ViteJS + TailwindCSS development example theme, similar to Tailpress but without additional code added","archived":false,"fork":false,"pushed_at":"2024-06-12T08:06:01.000Z","size":321,"stargazers_count":348,"open_issues_count":13,"forks_count":59,"subscribers_count":16,"default_branch":"main","last_synced_at":"2025-03-29T12:09:28.200Z","etag":null,"topics":["tailpress","tailwind","tailwindcss","vite","vitejs","wordpress","wordpress-theme"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/blonestar.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-04-01T08:25:23.000Z","updated_at":"2025-03-08T03:08:51.000Z","dependencies_parsed_at":"2024-12-15T04:05:07.069Z","dependency_job_id":"46dfab80-735a-4f13-a2ff-ee57f1f5acf8","html_url":"https://github.com/blonestar/wp-theme-vite-tailwind","commit_stats":{"total_commits":121,"total_committers":6,"mean_commits":"20.166666666666668","dds":"0.28099173553719003","last_synced_commit":"0641a2a3a29e948c94e29404d436c03f90950738"},"previous_names":[],"tags_count":16,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blonestar%2Fwp-theme-vite-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blonestar%2Fwp-theme-vite-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blonestar%2Fwp-theme-vite-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/blonestar%2Fwp-theme-vite-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/blonestar","download_url":"https://codeload.github.com/blonestar/wp-theme-vite-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247339158,"owners_count":20923014,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["tailpress","tailwind","tailwindcss","vite","vitejs","wordpress","wordpress-theme"],"created_at":"2024-09-24T13:54:54.652Z","updated_at":"2025-04-05T13:09:44.076Z","avatar_url":"https://github.com/blonestar.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Boilerplate Wordpress Theme with Tailwindcss \u0026 Vite\r\n\r\nExample 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.\r\nInspired by https://github.com/vitejs/vite/issues/341\r\n\r\n\u003cimg src=\"assets/img/hello-world.jpg\" width=\"100%\"\u003e\r\n\r\n## Main features\r\n\r\n- fast Auto browser refresh/sync file change/save\r\n- built in Tailwindcss Just-in-time compiler\r\n- extremely small CSS as there is no unsued css at all\r\n- keep your local domain while developing\r\n- `npm run build` for production packing Javascript and CSS\r\n\r\n## Installation (Node.js/npm required):\r\n\r\nClone 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.\r\nThen from your console or command prompt go to the theme folder and run **npm install**. Note: NodeJS is requred.\r\n\r\n```bash\r\nnpm install\r\n```\r\n\r\nQuick commands:\r\n```bash\r\n# dev server start\r\nnpm run dev\r\n\r\n# production build\r\nnpm run build\r\n```\r\n\r\n## Setup\r\n\r\nEntry point file **main.js** is where you include all your scripts and styles. It can be changed via **vite.config.json** and **functions.php**.\r\n\r\n```bash\r\n# get styles\r\nimport \"./assets/css/styles.css\"\r\n\r\n# get scripts\r\nimport \"./assets/js/scripts.js\"\r\n```\r\n\r\n## Development with live preview/refresh\r\n\r\nEnsure **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.\r\n\r\n```bash\r\nnpm run dev\r\n```\r\nAfter 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.\r\n\r\n\r\n## Production build\r\n\r\nJust run **npm run build**, set defined **IS_VITE_DEVELOPMENT** to **false** and refresh local website.\r\n\r\n```bash\r\nnpm run build\r\n```\r\nWordpress should load now production generated assets.\r\n\r\nNote: To ensure classes used inside CMS to be processed just add them to safelist.txt and run build again.\r\n\r\n\r\n## Sass / Less\r\n\r\nCSS Pre-processors are also supported by ViteJS\r\n\r\n```bash\r\n# .scss and .sass\r\nnpm add -D sass\r\n\r\n# .less\r\nnpm add -D less\r\n```\r\n\r\nPlease check link for details.\r\nhttps://vitejs.dev/guide/features#css-pre-processors\r\n\r\n\r\n## Note for httpS serving\r\nIf your local development domain is served via **https**:// then generating certificate for localhost usage and some changes in config are required\r\n- install mkcert utility and follow the instructions how to generate \u0026 install certificate https://github.com/FiloSottile/mkcert\r\n    - example on Windows 10 (PowerShell as Administrator)\r\n\r\n```bash\r\n# install mkcert\r\nchoco install mkcert\r\n\r\n# global one time install\r\nmkcert -install\r\n\r\n# run in project/theme folder to create localhost-key.pem \u0026 localhost.pem \r\nmkcert localhost\r\n```\r\n\r\n- enable server.https option in **vite.config.js**\r\n- change VITE_SERVER to http**s** in your **inc/inc.vite.php**\r\n\r\n\r\n\r\n\r\n## Customizations\r\n\r\nMore info on the links below\r\n- https://vitejs.dev/config/\r\n- https://tailwindcss.com/\r\n\r\nVisual Studio Code Tailwind Intellisense plugin is a must.\r\nhttps://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss\r\n\r\n---\r\nThat's it.\r\n\r\nHappy coding! :)\r\n\r\n---\r\n## Change log\r\n\r\n### v0.4.1\r\n- Package updates:\r\n  - autoprefixer              ^10.4.13   →   ^10.4.14 \r\n  - postcss                    ^8.4.20   →    ^8.4.21 \r\n  - postcss-nested              ^6.0.0   →     ^6.0.1 \r\n  - tailwindcss                 ^3.2.4   →     ^3.3.1 \r\n  - vite                        ^4.0.1   →     ^4.2.1\r\n  - vite-plugin-live-reload     ^3.0.1   →     ^3.0.2\r\n\r\n### v0.4\r\n- Package updates:\r\n  - vite             ^3.1.8   →     ^4.0.1\r\n  - autoprefixer   ^10.4.12   →   ^10.4.13\r\n  - postcss         ^8.4.18   →    ^8.4.20\r\n  - tailwindcss      ^3.2.1   →     ^3.2.4\r\n\r\n### v0.3.6\r\n- Package updates:\r\n  - tailwindcss               ^3.1.8    →     ^3.2.1 \r\n\r\n### v0.3.5\r\n- Package updates:\r\n  - autoprefixer              ^10.4.11   →   ^10.4.12\r\n  - postcss                    ^8.4.16   →    ^8.4.18\r\n  - postcss-nested              ^5.0.6   →     ^6.0.0\r\n  - vite                        ^3.1.3   →     ^3.1.8\r\n  - vite-plugin-live-reload     ^3.0.0   →     ^3.0.1\r\n- ABSPATH security check added\r\n- saflist.txt watch added\r\n\r\n### v0.3.4\r\n- Package updates:\r\n  - autoprefixer              ^10.4.7   →   ^10.4.11 \r\n  - postcss                   ^8.4.14   →    ^8.4.16 \r\n  - tailwindcss               ^3.0.24   →     ^3.1.8 \r\n  - vite                       ^2.9.9   →     ^3.1.3 \r\n  - vite-plugin-live-reload    ^2.1.0   →     ^3.0.0\r\n\r\n### v0.3.3\r\n- Package updates:\r\n  - autoprefixer   ^10.4.4   →   ^10.4.**7**\r\n  - postcss        ^8.4.12   →   ^8.4.14\r\n  - tailwindcss    ^3.0.23   →   ^3.0.24\r\n  - vite            ^2.9.1   →    ^2.9.9\r\n\r\n### v0.3.2\r\n- Refresh speed improved (file search pattern fixed in tailwind.config.js)\r\n- Package name changed\r\n- Vite script loading logic moved to inc/inc.vite.php\r\n- Homepage updated\r\n- Hashed assets filenames on build, force reload not needed\r\n\r\n### v0.3.1\r\n- Demo layout updated\r\n- Hello World preview image replaced\r\n- Package updates:\r\n    - postcss           ^8.4.7   →   ^8.4.12\r\n    - autoprefixer     ^10.4.2   →   ^10.4.4\r\n    - vite              ^2.8.6   →   ^2.9.1\r\n\r\n### v0.3.0\r\n- Tailwindcss 3 config fixes\r\n\r\nPackages updates:\r\n- autoprefixer     ^10.2.5   →   ^10.4.2\r\n- postcss          ^8.2.14   →    ^8.4.7\r\n- postcss-nested    ^5.0.5   →    ^5.0.6\r\n- tailwindcss       ^2.1.2   →   ^3.0.23\r\n- vite              ^2.2.4   →    ^2.8.6\r\n\r\n### v0.2.7\r\n- Tailwind updated to 2.2.16\r\n- PostCSS updated to v8.3.8\r\n- Autoprefixer updated to 10.3.6\r\n- Vite updated to v2.6.2\r\n\r\n### v0.2.6\r\n- Tailwind updated to 2.2.15\r\n- Vite updated to v2.5.7\r\n- Autoprefixer updated to 10.3.4\r\n- PostCSS updated to v8.3.6\r\n- PostCSS-Nested updated to 5.0.6\r\n- IS_VITE_DEVELOPMENT check fix\r\n\r\n### v0.2.5\r\n- PostCSS updated to v8.2.14\r\n\r\n### v0.2.4\r\n- https solution added\r\n- 404.php template file added\r\n\r\n### v0.2.3\r\n- Vite updated to v2.2.4\r\n- PostCSS updated to v8.2.13\r\n- Tailwindcss updated to v2.1.2\r\n- https option included into server vite.config.js\r\n\r\n### v0.2.2\r\n- small workaround added in order Tailwindcss Intellisense to work\r\n- postcss package updated to v8.2.10\r\n- index.php splited into header.php \u0026 footer.php\r\n- example page.php template with responsive container added\r\n\r\n### v0.2.1\r\n- TailwindCSS updated to 2.1.1 (JIT is included in this version)\r\n- experimental @tailwindcss/jit removed\r\n- functions.php cleanup\r\n- tailwind.config.js, mode 'JIT' added (v2.1.1)\r\n- postcss.config.js updated\r\n\r\n### v0.1.0\r\n- initial release\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblonestar%2Fwp-theme-vite-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fblonestar%2Fwp-theme-vite-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fblonestar%2Fwp-theme-vite-tailwind/lists"}