Grapesjs Tailwind
npm install grapesjs-tailwind> Requires grapesjs-plugin-forms
Tailwind intergration which includes the complete set of blocks from Tailblocks.cc, bases on Destack.
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.gitUsage
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
``MIT