Editor Setup - Flowbite React

Learn how to setup intellisense, format and lint support for 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#


  1. Install the official Tailwind CSS IntelliSense extension for Visual Studio Code.
  1. Create .vscode directory at the root level of the application:
mkdir .vscode
  1. Create settings.json file in the .vscode directory:
touch .vscode/settings.json
  1. 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
  1. Create a prettier configuration file named prettier.config.js:
touch prettier.config.js
  1. 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
  1. Install eslint-plugin-tailwindcss package:
npm i -D eslint-plugin-tailwindcss
  1. Add plugin:tailwindcss/recommended to extends and configure settings.tailwindcss:
/** @type {import("eslint").Linter.Config} */
module.exports = {
  // ...
  extends: [
    // ...
  settings: {
    // ...
    tailwindcss: {
      callees: ["twMerge", "createTheme"],
      classRegex: "^(class(Name)|theme)?$",