@pinegrow/tailwindcss-plugin
v3.0.32
Published
Pinegrow TailwindCSS Plugin
Downloads
539
Readme
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).
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 withconfigPath
andcssPath
as options toliveDesigner
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) */
/* 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,
},
},
}),
//...
],
//...
})
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
* 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/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
Copyright (c) Pinegrow