Editor Setup - Flowbite React

This comprehensive guide will help you set up your development environment with proper intellisense, formatting, and linting support for Flowbite React's custom theme prop and Tailwind CSS integration.

VS Code Setup#

Visual Studio Code is our recommended editor for Flowbite React development. Follow these sections to configure your environment properly.

Tailwind Intellisense#

Follow these steps to enable intelligent Tailwind CSS suggestions and autocompletion:

1. Install the official Tailwind CSS IntelliSense extension from the VS Code marketplace.
2. Create a .vscode directory in your project root:

mkdir .vscode

3. Create a VS Code settings file:

touch .vscode/settings.json

4. Configure VS Code settings for Tailwind CSS support:

{
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.classAttributes": ["class", "className", "theme"],
  "tailwindCSS.experimental.classRegex": [
    ["twMerge\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["createTheme(?:<\\w+>)?\\s*\\(([^)]*)\\)", "{?\\s?[\\w].*:\\s*?[\"'`]([^\"'`]*).*?,?\\s?}?"]
  ]
}

Prettier Setup#

Ensure consistent code formatting with Prettier:

1. Install the required packages:

npm i -D prettier prettier-plugin-tailwindcss

2. Create a Prettier configuration file:

touch prettier.config.js

3. Configure Prettier with Tailwind CSS support:

/** @type {import('prettier').Config} */
module.exports = {
  plugins: ["prettier-plugin-tailwindcss"],
  // tailwindcss
  tailwindAttributes: ["theme"],
  tailwindFunctions: ["twMerge", "createTheme"],
};

ESLint Setup#

Set up ESLint to ensure code quality and catch potential issues:

Legacy Configuration#

1. Install the Tailwind CSS ESLint plugin:

npm i -D eslint-plugin-tailwindcss

2. Configure ESLint with Tailwind CSS support:

/** @type {import("eslint").Linter.Config} */
module.exports = {
  // ...
  extends: [
    // ...
    "plugin:tailwindcss/recommended",
  ],
  settings: {
    // ...
    tailwindcss: {
      callees: ["twMerge", "createTheme"],
      classRegex: "^(class(Name)|theme)?$",
    },
  },
};

Flat Configuration#

Starting with ESLint v9, the flat config format is the default configuration method. Here's how to set up ESLint with Tailwind CSS support using the new flat config format:

1. Install ESLint Tailwind CSS plugin:

npm i -D eslint-plugin-tailwindcss

2. Configure ESLint with Tailwind CSS support using the flat config format:

import tailwindcss from "eslint-plugin-tailwindcss";

export default [
  ...tailwindcss.configs["flat/recommended"],
  {
    settings: {
      tailwindcss: {
        callees: ["twMerge", "createTheme"],
        classRegex: "^(class(Name)|theme)?$",
      },
    },
  },
];

Automated Setup#

For existing projects, you can quickly configure your editor using our CLI tool:

npx flowbite-react@latest setup vscode

This command will:

• Create the necessary .vscode directory
• Configure VS Code settings for Tailwind CSS
• Set up recommended extensions
• Configure Prettier and ESLint integrations

Note: If you're starting a new project, you don't need to run this command separately. The npx flowbite-react@latest init command automatically includes all editor setup as part of its initialization process. Only use setup vscode when configuring an editor for an existing project.

Next Steps#

After completing this setup, your Visual Studio Code environment will be fully configured for Flowbite React development with:

• Intelligent Tailwind CSS suggestions
• Automatic code formatting
• Code quality checking
• Full support for the custom theme prop

For additional configuration options or troubleshooting, refer to our GitHub repository or join our community on Discord.