Pinegrow TailwindCSS Plugin

Pinegrow TailwindCSS Plugin enables intellisense, visual control customization and theming in Pinegrow apps (currently only Vue Designer).

Note:

This plugin is generally used in conjunction with the Pinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Iles, Nuxt and Astro.
To use Tailwind CSS in Pinegrow apps, you require an active Tailwind Addon subscription.
Learn more about Vue Designer

Features

🎨 Visually live-design your Vite-powered tailwind apps (Vue, Nuxt, Iles, Astro, etc)
⚙️ Smartly integrates into your Vite workflow in dev-mode only
✨ Clean code 😃, No lock-in - You are in control of your projects and development workflow ❤️

Quick Setup

Install: Add @pinegrow/tailwindcss-plugin to your project

# Using npm
npm install -D @pinegrow/tailwindcss-plugin

# Using pnpm
pnpm add -D @pinegrow/tailwindcss-plugin

Configure: Add tailwindcss along with configPath and cssPath as options to liveDesigner in your config.

//vite.config.[js,ts]

export default defineConfig({
    plugins: [
        liveDesigner({
            // For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
            //...
            tailwindcss: {
                /* PinegrowTailwindCSSModuleOptions (for more details, refer to Options section below) */
                configPath: 'tailwind.config.ts',
                cssPath: '@/assets/css/tailwind.css',
            },
        }),
        //...
    ],
    //...
})

//nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@pinegrow/nuxt-module',
        //...
    ],
    pinegrow: {
        liveDesigner: {
            // For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
            //...
            tailwindcss: {
                /* PinegrowTailwindCSSModuleOptions (for more details, refer to Options section below) */
                configPath: 'tailwind.config.ts',
                cssPath: '@/assets/css/tailwind.css',
            },
        },
    },
    //...
})

//iles.config.ts

import type { LiveDesignerOptions } from '@pinegrow/vite-plugin'
export default defineConfig({
  modules: [
    [
      '@pinegrow/iles-module',
      {
        liveDesigner: {
          // For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
          //...
          tailwindcss: {
            /* PinegrowTailwindCSSModuleOptions (for more details, refer to Options section below) */
            configPath: 'tailwind.config.ts',
            cssPath: '@/assets/css/tailwind.css',
          },
        } as LiveDesignerOptions,
      },
    ],
    //...
  ],
  //...
})

//astro.config.[mjs]

import { defineConfig } from 'astro/config'
import vue from '@astrojs/vue'
import Pinegrow from '@pinegrow/astro-module'

export default defineConfig({
    integrations: [
        vue(),
        Pinegrow({
            liveDesigner: {
                // For options, refer to https://www.npmjs.com/package/@pinegrow/vite-plugin
                //...
                tailwindcss: {
                    /* PinegrowTailwindCSSModuleOptions (for more details, refer to Options section below) */
                    configPath: 'tailwind.config.ts',
                    cssPath: '@/assets/css/tailwind.css',
                },
            },
        }),
        //...
    ],
    //...
})

Now, open your project in your Pinegrow app (currently only Vue Designer). ✨
Theme Customization (optional) - Pinegrow Tailwind CSS addon enables easy theming based on colors, fonts and background images. Theme files are saved at the location specified by the themePath option (default: [src]/themes/pg-tailwindcss/tokens.[cjs,mjs]). To use the theme, follow the instructions in the Config Panel of your Pinegrow app (currently only Vue Designer) under @pinegrow/tailwindcss-plugin package.

Options

interface PinegrowTailwindCSSModuleOptions {
    /**
     * Absolute or relative path of the tailwind configuration file.
     */
    configPath: string | any

    /**
     * Absolute or relative path of the tailwind entry css file.
     */
    cssPath: string | any

    /**
     * Absolute or relative path of the tailwind theme file.
     * @default 'src/themes/pg-tailwindcss/tokens.[cjs,mjs]'
     * @default 'themes/pg-tailwindcss/tokens.[cjs,mjs]' // Nuxt
     */
    themePath?: string | any

    /**
     * Restart on tailwind config file updates
     * @default false
     */
    restartOnConfigUpdate?: boolean

    /**
     * Restart on tailwind theme file updates
     * @default false
     */
    restartOnThemeUpdate?: boolean
}

interface PinegrowTailwindCSSModule {
    /**
     * Pinegrow TailwindCSS Module Options, added within liveDesigner in vite/nuxt/iles/astro config files
     */
    tailwindcss: PinegrowTailwindCSSModuleOptions
}

License

MIT License