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 along with Pinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Iles, Nuxt or Astro.

📖 Documentation

Features

🎨 Visually live-design your Vite-powered tailwind apps (Vue, Nuxt, Iles, Astro, etc)
⚙️ Smartly integrates into your Vite workflow in dev-mode only
✨ No lock-in, Pinegrow is an open-tool ❤️

Quick Setup

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

# Using npm
npm install --save-dev @pinegrow/tailwindcss-plugin

# Using pnpm
pnpm add --save-dev @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({
            tailwindcss: {
                configPath: 'tailwind.config.ts',
                cssPath: '@/assets/css/tailwind.css',
            },
        }),
        //...
    ],
    //...
})

//nuxt.config.ts

export default defineNuxtConfig({
    modules: [
        '@pinegrow/nuxt-module',
        //...
    ],
    pinegrow: {
        liveDesigner: {
            tailwindcss: {
                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: {
          tailwindcss: {
            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: {
                tailwindcss: {
                    configPath: 'tailwind.config.ts',
                    cssPath: '@/assets/css/tailwind.css',
                },
            },
        }),
        //...
    ],
    //...
})

Now, open your project in your Pinegrow app (currently only Vue Designer). ✨

License

MIT License