Editor Setup - Flowbite React

To bring intellisense, format and lint support for the custom theme prop, we need to create the following IDE configuration files.

Visual Studio Code#

Intellisense#

1. Install the official Tailwind CSS IntelliSense extension for Visual Studio Code.

2. Create .vscode directory at the root level of the application:

mkdir .vscode

3. Create settings.json file in the .vscode directory:

touch .vscode/settings.json

4. Add the following content to settings.json:

{
  "tailwindCSS.classAttributes": ["class", "className", "theme"],
  "tailwindCSS.experimental.classRegex": [
    ["twMerge\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["createTheme\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
  ]
}

Format (Prettier)#

1. Install prettier and prettier-plugin-tailwindcss packages:

npm i -D prettier prettier-plugin-tailwindcss

2. Create a prettier configuration file named prettier.config.js:

touch prettier.config.js

3. Add prettier-plugin-tailwindcss to plugins list and configure target tailwind attributes and functions:

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

Lint (ESlint)#

1. Install and configure eslint

npm init @eslint/config

2. Install eslint-plugin-tailwindcss package:

npm i -D eslint-plugin-tailwindcss

3. Add plugin:tailwindcss/recommended to extends and configure settings.tailwindcss:

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