Pinegrow TailwindCSS Plugin

Tailwind CSS plugin for Pinegrow ⚡️

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

The plugin supports Tailwind CSS v3 and v4 projects, including v4 projects that use @tailwindcss/vite or @tailwindcss/postcss.

Note:

• This plugin is generally used in conjunction with the Pinegrow Vite Plugin or with the meta-framework specific Pinegrow modules for Nuxt, Quasar, Iles 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, Quasar, 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

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

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

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

2. Configure: Add tailwindcss with your Tailwind entry CSS path as options to liveDesigner in your config. For Tailwind CSS v3 projects, or v4 projects that still use a JavaScript config, provide configPath as well.

//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) */
				/* Please ensure that you update the filenames and paths to accurately match those used in your project. */
				configPath: 'tailwind.config.ts',
				cssPath: '@/assets/css/tailwind.css',
				// restartOnConfigUpdate: true,
				// restartOnThemeUpdate: true,
			},
		}),
		//...
	],
	//...
})

//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) */
				/* Please ensure that you update the filenames and paths to accurately match those used in your project. */
				configPath: 'tailwind.config.ts',
				cssPath: '@/assets/css/tailwind.css',
				// restartOnConfigUpdate: true,
				// restartOnThemeUpdate: true,
			},
		},
	},
	//...
})

//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) */
            /* Please ensure that you update the filenames and paths to accurately match those used in your project. */
            configPath: 'tailwind.config.ts',
            cssPath: '@/assets/css/tailwind.css',
            // restartOnConfigUpdate: true,
            // restartOnThemeUpdate: true,
          },
        } 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) */
					/* Please ensure that you update the filenames and paths to accurately match those used in your project. */
					configPath: 'tailwind.config.ts',
					cssPath: '@/assets/css/tailwind.css',
					// restartOnConfigUpdate: true,
					// restartOnThemeUpdate: true,
				},
			},
		}),
		//...
	],
	//...
})

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

4. 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.

Tailwind Config Plugin Usage

In CommonJS-style Tailwind config files, the package can be required and called directly:

plugins: [
	require('@pinegrow/tailwindcss-plugin')({
		colors: pg_colors,
		fonts: pg_fonts,
		backgrounds: pg_backgrounds,
	}),
]

In ESM or TypeScript Tailwind config files, default import remains the preferred form:

import pinegrowTailwind from '@pinegrow/tailwindcss-plugin'

export default {
	plugins: [
		pinegrowTailwind({
			colors: pg_colors,
			fonts: pg_fonts,
			backgrounds: pg_backgrounds,
		}),
	],
}

The previous CommonJS .default(...) form is no longer supported by current package builds. Update older Tailwind config files to call the required package directly.

Tailwind CSS v4 Notes

For Tailwind CSS v4 projects, set cssPath to the CSS file that imports Tailwind:

@config "../../../tailwind.config.ts";

@import 'tailwindcss';

The @config line is optional for CSS-first projects. Provide configPath only when your project still uses a Tailwind config file.

Options

interface PinegrowTailwindCSSModuleOptions {
	/**
	 * Absolute or relative path of the tailwind configuration file.
	 * Optional for Tailwind CSS v4 CSS-first projects.
	 */
	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
	 * Set to false to turn off theming via Design Panel
	 */
	themePath?: string | boolean

	/**
	 * 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/quasar/iles/astro config files
	 */
	tailwindcss: PinegrowTailwindCSSModuleOptions
}

interface PinegrowTailwindCSSPluginOptions {
	colors?: {
		[key in string]?: any
	}
	colorVars?: boolean
	colorVarsPrefix?: string
	colorShades?: boolean | Array<number | 'DEFAULT' | 'default'>
	fonts?: {
		[key in string]?: string[]
	}
	backgrounds?: {
		[key in string]?: string
	}
	theme?:
		| boolean
		| {
				colorScheme?: boolean
				typographyScheme?: boolean
				flavour?: string
				prefix?: string
		  }
}

License

MIT License

Copyright (c) Pinegrow