Grapesjs Tailwind(WIP)

DEMO

> Requires grapesjs-plugin-forms

Tailwind intergration which includes the complete set of blocks from Tailblocks.cc, bases on Destack.

$3

``html

`

$3

`js
// Handle tailwind's use of slashes in css names
const escapeName = (name) => ${name}.trim().replace(/([^a-z0-9\w-:/]+)/gi, '-');

const editor = grapesjs.init({
container: '#gjs',
height: '100%',
fromElement: true,
storageManager: false,
selectorManager: { escapeName },
plugins: ['grapesjs-tailwind'],
});
`

$3


`css
body, html {
margin: 0;
height: 100%;
}

.change-theme-button {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 5px;
}

.change-theme-button:focus {
/ background-color: yellow; /
outline: none;
box-shadow: 0 0 0 2pt #c5c5c575;
}
`

$3


`css
/ Make blocks full width /
.gjs-block {
padding: 0 !important;
width: 100% !important;
min-height: auto !important;
}

/ Fit icons properly /
.gjs-block svg {
width: 100%;
}
`




Summary

* Plugin name: grapesjs-tailwind
* Commands
* get-tailwindCss - Get Tailwind CSS of your page
* open-update-theme - Open theme modal

$3

`js
// By default it will print css to console
editor.runCommand('get-tailwindCss');

// Using options
editor.runCommand('get-tailwindCss', { / Options here / });
`

#### get-tailwindCss Options

| Option | Description | Default |
|-|-|-
| callback | Calback for resulting css | twcss => console.log(twcss) |




Options

| Option | Description | Default |
|-|-|-
| tailwindPlayCdn | URL for fetching tailwind play cdn | https://cdn.tailwindcss.com |
| tailwindPlugins | array to include tailwind 1st party plugins | [] |
| tailwindConfig | custom tailwind config | {} |
| changeThemeText | Change theme modal title | Change Theme |
| loadBlocks | Load default blocks | true |

Download

* CDN
* https://unpkg.com/grapesjs-tailwind
* NPM
* npm i grapesjs-tailwind
* GIT
* git clone https://github.com/Ju99ernaut/grapesjs-tailwind.git

Usage

Directly in the browser
`html





`

Modern javascript
`js
import grapesjs from 'grapesjs';
import plugin from 'grapesjs-tailwind';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
container : '#gjs',
// ...
plugins: [plugin],
pluginsOpts: {
[plugin]: { / options / }
}
// or
plugins: [
editor => plugin(editor, { / options / }),
],
});
`

Development

Clone the repository

`sh
$ git clone https://github.com/Ju99ernaut/grapesjs-tailwind.git
$ cd grapesjs-tailwind
`

Install dependencies

`sh
$ npm i
`

Start the dev server

`sh
$ npm start
`

Build the source

`sh
$ npm run build
``

License

MIT