npm package: @pinegrow/tailwindcss-plugin
Description: Pinegrow TailwindCSS Plugin
Author: Pinegrow
Latest version: 3.0.35

<!-- [![@pinegrow/tailwindcss-plugin](https://tailwindcss.nuxtjs.org/social-card.png)](https://tailwindcss.nuxtjs.org) -->

# Pinegrow TailwindCSS Plugin

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

[Tailwind CSS](https://tailwindcss.com/) plugin for [Pinegrow](https://pinegrow.com) ⚡️

Pinegrow TailwindCSS Plugin enables intellisense, visual control customization and theming in Pinegrow apps (currently only Pinegrow Web Editor & Vue Designer).

Note:

-   This plugin is generally used in conjunction with the [Pinegrow Vite Plugin](https://www.npmjs.com/package/@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.
-   [&nbsp;Learn more about Vue Designer](https://vuedesigner.com)

## Features

-   🎨&nbsp; Visually live-design your Vite-powered tailwind apps (Vue, Nuxt, Quasar, Iles, Astro, etc)
-   ⚙️&nbsp; Smartly integrates into your Vite workflow in dev-mode only
-   ✨&nbsp; 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

```bash
# Using npm
npm install -D @pinegrow/tailwindcss-plugin

# Using pnpm
pnpm add -D @pinegrow/tailwindcss-plugin
```

2. Configure: Add `tailwindcss` along with `configPath` and `cssPath` as options to `liveDesigner` in your config.

```js
//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,
			},
		}),
		//...
	],
	//...
})
```

```js
//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,
			},
		},
	},
	//...
})
```

```js
//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,
      },
    ],
    //...
  ],
  //...
})
```

```js
//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.

## Options

```ts
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
	 * 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
	}
	fonts?: {
		[key in string]?: string[]
	}
	backgrounds?: {
		'design-image': string
		'design-image-large': string
	}
}

interface PinegrowTailwindCSSPlugin {
	/**
	 * Pinegrow TailwindCSS Plugin Options, added to the plugins array in tailwind config file
	 */
	default: PinegrowTailwindCSSPluginOptions
}
```

## License

[MIT License](./LICENSE)

Copyright (c) Pinegrow

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/@pinegrow/tailwindcss-plugin/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-version-href]: https://npmjs.com/package/@pinegrow/tailwindcss-plugin
[npm-downloads-src]: https://img.shields.io/npm/dm/@pinegrow/tailwindcss-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[npm-downloads-href]: https://npmjs.com/package/@pinegrow/tailwindcss-plugin
[license-src]: https://img.shields.io/npm/l/@pinegrow/tailwindcss-plugin.svg?style=flat&colorA=18181B&colorB=28CF8D
[license-href]: https://npmjs.com/package/@pinegrow/tailwindcss-plugin