RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/fasenderos/grapesjs-tailwindcss-plugin below:

fasenderos/grapesjs-tailwindcss-plugin: A powerful GrapesJS plugin that integrates Tailwind CSS 4, automatically rebuilding the CSS with every HTML/CSS change. The optimized file is then included in the export, ensuring up-to-date utilities and fast development.

GrapesJS TailwindCSS Plugin

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.
Multi Page Support: The plugin makes use of the PageManager

DEMO

⭐ Star me on GitHub — it motivates me a lot!

<script src="https://unpkg.com/grapesjs-tailwindcss-plugin"></script>

npm i grapesjs-tailwindcss-plugin

git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git

<link
  href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/grapesjs-tailwindcss-plugin.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
    container: "#gjs",
    // ... other configurations
    plugins: ["grapesjs-tailwindcss-plugin"],
    pluginsOpts: {
      "grapesjs-tailwindcss-plugin": {
        // Options like autobuild, toolbarPanel, notificationCallback, buildButton, etc.
      },
    },
  });
</script>

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 */ }),
  // ],
});

Plugin name: grapesjs-tailwindcss-plugin
Commands: build-tailwind
Button: build-tailwind-button

Option Description Type Default prefix Prefix to use for Tailwind CSS classes. Helps differentiate Tailwind classes from others. string or null null autobuild If true, the plugin automatically rebuilds Tailwind CSS on each update. Set to false for manual builds. boolean true autocomplete Controls the behavior of the autocomplete feature that provides Tailwind class name suggestions. Set this option to false when using GrapesJS Studio, as it already provides its own class autocomplete. If set to true (default), autocomplete is enabled and will use the default selector #gjs-clm-new. If set to false, autocomplete is disabled. If set to a string, that string will be used as a custom selector for the autocomplete. See the autoComplete.js docs for more details on selector config. boolean or string true customCss The URL of a CSS file or a raw CSS string that will be appended immediately after the @import 'tailwindcss'; statement. This allows you to extend Tailwind's styles dynamically. See the Tailwind docs for more details. string "" buildButton Option to add a manual build button to the toolbar for triggering the CSS build process. boolean false toolbarPanel Specify the panel where the build button should be added (e.g., options). string options notificationCallback A custom callback function to handle notifications when Tailwind CSS is compiled. function () => void

Clone the repository

$ git clone https://github.com/fasenderos/grapesjs-tailwindcss-plugin.git
$ cd grapesjs-tailwindcss-plugin

Install dependencies

Start the dev server

Build the source

🛠️ Common Errors & How to Fix Them

Sometimes you might encounter issues when using this plugin with different GrapesJS environments. Here are some known errors and their solutions:

Cannot read properties of null (reading 'addEventListener')

TypeError: Cannot use 'in' operator to search for 'aria-controls' in null

Cause: This happens because this plugin has an autocomplete feature that tries to attach to an input field that exists in GrapesJS Editor, but not in GrapesJS Studio. Studio already provides its own autocomplete for CSS classes, so the plugin fails when it doesn’t find the expected element.

Solution: Disable the plugin’s autocomplete when initializing it with GrapesJS Studio:

import tailwindPlugin from 'grapesjs-tailwindcss-plugin';

createStudioEditor({
  root: editorEl.value,
  plugins: [
    (editor) => tailwindPlugin(editor, { autocomplete: false })
  ],
});

By setting autocomplete: false, the plugin will skip attaching the autocomplete, avoiding the error.

💡 Found another issue?

If you run into a different problem, feel free to open an issue on GitHub and provide a minimal reproducible example.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4