https://github.com/fasenderos/grapesjs-tailwindcss-plugin
A powerful GrapesJS plugin that integrates Tailwind CSS 4 for modern styling and rapid development.
https://github.com/fasenderos/grapesjs-tailwindcss-plugin
grapesjs grapesjs-plugin tailwind tailwind-css tailwindcss
Last synced: 3 months ago
JSON representation
A powerful GrapesJS plugin that integrates Tailwind CSS 4 for modern styling and rapid development.
- Host: GitHub
- URL: https://github.com/fasenderos/grapesjs-tailwindcss-plugin
- Owner: fasenderos
- License: mit
- Created: 2025-03-09T11:51:07.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-03-09T12:29:37.000Z (3 months ago)
- Last Synced: 2025-03-09T12:33:25.930Z (3 months ago)
- Topics: grapesjs, grapesjs-plugin, tailwind, tailwind-css, tailwindcss
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/grapesjs-tailwindcss-plugin
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Authors: AUTHORS
Awesome Lists containing this project
README
# GrapesJS TailwindCSS Plugin
A powerful GrapesJS plugin that integrates **Tailwind CSS 4** for modern styling and rapid development. Unlike other plugins that are stuck on Tailwind 3, this plugin dynamically builds the Tailwind CSS on-the-fly and makes it available in the export, ensuring you have access to the latest Tailwind features and utilities.
## Overview
The **GrapesJS TailwindCSS Plugin** seamlessly integrates Tailwind CSS 4 with GrapesJS, enabling you to leverage a modern CSS framework directly within your page builder. With on-the-fly CSS building, this plugin provides up-to-date styles and exports the compiled CSS with your project.
**Key Features:**
- **Tailwind CSS 4 Integration:** Utilize the latest version of Tailwind CSS.
- **Dynamic CSS Build:** Automatically compiles Tailwind CSS based on your project's classes.
- **Export Ready:** The compiled CSS is appended to your export, ensuring consistency.
## Installation
### CDN
```html
```
### NPM
```sh
npm i grapesjs-tailwindcss-plugin
```
### GIT
```sh
git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git
```
## Usage
### Directly in the Browser
```html
var editor = grapesjs.init({
container: "#gjs",
// ... other configurations
plugins: ["grapesjs-tailwindcss-plugin"],
pluginsOpts: {
"grapesjs-tailwindcss-plugin": {
// Options like autobuild, toolbarPanel, notificationCallback, buildButton, etc.
},
},
});
```
### Modern Javascript
```js
import grapesjs from "grapesjs";
import plugin from "grapesjs-tailwindcss-plugin";
import "grapesjs/dist/css/grapes.min.css";
const editor = grapesjs.init({
container: "#gjs",
// ... other configurations
plugins: [plugin],
pluginsOpts: {
[plugin]: {
// Options like autobuild, toolbarPanel, notificationCallback, buildButton, etc.
},
},
// Alternatively:
// plugins: [
// editor => plugin(editor, { /* options */ }),
// ],
});
```
## Summary
- Plugin name: `grapesjs-tailwindcss-plugin`
- Commands: `build-tailwind`
- Button: `build-tailwind-button`
## Options
| Option | Description | Default |
| ---------------------- | --------------------------------------------------------------------------------------------------------- | ------------ |
| `prefix` | Prefix to use for Tailwind CSS classes. Helps differentiate Tailwind classes from others. | `tw` |
| `autobuild` | If `true`, the plugin automatically rebuilds Tailwind CSS on each update. Set to false for manual builds. | `true` |
| `buildButton` | Option to add a manual build button to the toolbar for triggering the CSS build process. | `false` |
| `toolbarPanel` | Specify the panel where the build button should be added (e.g., `options`). | `options` |
| `notificationCallback` | A custom callback function to handle notifications when Tailwind CSS is compiled. | `() => void` |
## Development
Clone the repository
```sh
$ git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git
$ cd grapesjs-tailwindcss-plugin
```
Install dependencies
```sh
$ npm i
```
Start the dev server
```sh
$ npm start
```
Build the source
```sh
$ npm run build
```
## License
Copyright [Andrea Fassina](https://github.com/fasenderos), Licensed under [MIT](LICENSE).