https://github.com/techakayy/pg-vite-tailwindcss

Pinegrow external build for Tailwindcss with Vite (advanced)
https://github.com/techakayy/pg-vite-tailwindcss

community-templates pinegrow tailwindcss vite wordpress

Last synced: about 1 month ago
JSON representation

Pinegrow external build for Tailwindcss with Vite (advanced)

• Host: GitHub
• URL: https://github.com/techakayy/pg-vite-tailwindcss
• Owner: TechAkayy
• Created: 2023-12-07T00:41:41.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-18T09:48:55.000Z (3 months ago)
• Last Synced: 2024-09-18T13:03:23.743Z (3 months ago)
• Topics: community-templates, pinegrow, tailwindcss, vite, wordpress
• Language: JavaScript
• Homepage: https://pg-vite-tailwindcss.netlify.app/
• Size: 1.37 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Pinegrow External Build Process with Vite - A Community Template

This vite-powered external build process outputs both `tailwind.css` and `tailwind_for_wp_editor.css`, allowing the latter to be used in WordPress blocks.

While the `tailwind.css` build includes Tailwind preflight, `tailwind_for_wp_editor.css` omits the preflight styles since they do not integrate well with WordPress blocks.

A custom Vite plugin, `vite-plugin-pg.js`, serves this purpose and utilizes environment variables (`LIB` and `WP`) passed from the package.json script commands (`watch` and `watch-wp`). The `WP` environment variable is then used in `tailwind.config.js` to conditionally enable or disable Tailwind preflight.

The external build process is node-based, so it only works with the Pinegrow Desktop app. It provides users the advantage of customizing the Tailwind config to any extent, using Tailwind plugins, and employing @apply directives, among other features.

Note that this external build workflow is useful when the primary method of Tailwind styling is through the Pinegrow Desktop app rather than the Pinegrow WP Plugin. Once the external build is selected, reverting to the internal compiler will fallback to using basic Tailwind directives, so it is not recommended.

## Usage

### Start the builds in watch mode

```bash

npm run dev # chains multiple watch commands

```

### Preview

```bash

npm run now # build & preview

```

### Build (for non-wordpress sites)

```bash

npm run build

```