To use EditCrafter with Tailwind CSS, you need to set up Tailwind CSS in your project. Here's a step-by-step guide to help you integrate Tailwind CSS and customize your tailwind.config.js file for use with EditCrafter.

Step 1: Install Tailwind CSS

If you haven't installed Tailwind CSS in your project yet, run the following commands to add it:

npm install -D tailwindcss postcss autoprefixer

or with yarn:

yarn add -D tailwindcss postcss autoprefixer

Then, create the tailwind.config.js file by running:

npx tailwindcss init

Step 2: Configure tailwind.config.js

Open the tailwind.config.js file and customize it as needed for your project. Here's a basic configuration to get started with EditCrafter:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/editcrafter/**/*.{js,ts,jsx,tsx}", // Add this line to include EditCrafter components
  ],
  theme: {
    extend: {
      // Add custom theme configurations if needed
    },
  },
  plugins: [],
};

• The content array includes paths to all your source files and any external components, such as those from the EditCrafter package, to ensure Tailwind CSS can purge unused styles for a smaller output file.

Step 3: Add Tailwind Directives to Your CSS

Create or open your main CSS file (e.g., ./src/styles/index.css) and add the Tailwind directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

This will import Tailwind CSS styles into your project.

Step 4: Import Your CSS File

Ensure that your CSS file is imported at the top of your index.tsx or App.tsx:

import "./styles/index.css";

Final Note: Customization for EditCrafter

• You can customize the theme in your tailwind.config.js by extending theme as needed for your specific use case.
• EditCrafter already comes with built-in styles, but you can add your own custom Tailwind classes to further style the editor's components.

Full Example of a tailwind.config.js File

Here's an example tailwind.config.js file that you can use as a template:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/editcrafter/**/*.{js,ts,jsx,tsx}", // Ensure EditCrafter components are included
  ],
  theme: {
    extend: {
      colors: {
        primary: "#1DA1F2",
        secondary: "#657786",
      },
      fontFamily: {
        sans: ["Arial", "Helvetica", "sans-serif"],
      },
    },
  },
  plugins: [],
};

also you can use CrafterPreview component to view preview

Using EditCrafter with Tailwind

Once you've completed the above steps, you can use EditCrafter in your project and style its components using Tailwind CSS classes as needed.

Repository Information

You can find the EditCrafter package and its development updates on GitHub. For any issues or contributions, feel free to open an issue or submit a pull request.