​

Configuration

​

Vite Configuration

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
})

​

Configuration Options

​

Plugins

• @vitejs/plugin-react - Enables React Fast Refresh and JSX transformation
  • Automatically transforms JSX to JavaScript
  • Provides instant feedback during development
  • Preserves component state during edits

​

Common Customizations

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000
  }
})

export default defineConfig({
  plugins: [react()],
  base: '/my-app/'
})

import path from 'path'

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components')
    }
  }
})

export default defineConfig({
  plugins: [react()],
  define: {
    __APP_VERSION__: JSON.stringify('1.0.0')
  }
})

​

Tailwind Configuration

export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'institucional-dorado': '#c29b47', 
        'institucional-claro': '#fdfaf5',
      }
    },
  },
  plugins: [],
}

​

Configuration Options

​

Content

• ./index.html - Main HTML entry point
• ./src/**/*.{js,ts,jsx,tsx} - All JavaScript/TypeScript/JSX/TSX files in src

​

Custom Colors

<div className="bg-institucional-claro text-institucional-dorado">
  Brand colored content
</div>

​

Plugins

• @tailwindcss/forms - Better form styling
• @tailwindcss/typography - Prose content styling
• @tailwindcss/aspect-ratio - Aspect ratio utilities

​

Extending the Configuration

theme: {
  extend: {
    colors: {
      'institucional-dorado': '#c29b47',
      'institucional-claro': '#fdfaf5',
      'institucional-azul': '#1e40af',
    }
  },
}

theme: {
  extend: {
    fontFamily: {
      sans: ['Inter', 'system-ui', 'sans-serif'],
      heading: ['Poppins', 'sans-serif'],
    }
  },
}

theme: {
  extend: {
    screens: {
      'xs': '475px',
      '3xl': '1920px',
    }
  },
}

​

ESLint Configuration

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
    },
  },
])

​

Configuration Breakdown

​

Global Ignores

globalIgnores(['dist'])

​

File Patterns

files: ['**/*.{js,jsx}']

​

Extended Configurations

1. js.configs.recommended - Core ESLint rules for JavaScript
2. reactHooks.configs.flat.recommended - Rules for React Hooks:
   • Ensures Hooks are called in the correct order
   • Validates dependencies in useEffect, useMemo, etc.
   • Prevents Hooks in conditionals or loops
3. reactRefresh.configs.vite - Rules for Fast Refresh:
   • Ensures components export properly
   • Validates Hot Module Replacement compatibility

​

Language Options

• ecmaVersion: 2020 - Enables modern JavaScript features
• globals.browser - Recognizes browser globals (window, document, etc.)
• jsx: true - Enables JSX parsing
• sourceType: 'module' - Uses ES modules (import/export)

​

Custom Rules

'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }]

• Throws error on unused variables
• Ignores variables starting with uppercase letter or underscore
• Useful for imported React components or constants

​

Adding Custom Rules

rules: {
  'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
  'consistent-return': 'error'
}

rules: {
  'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
  'no-console': 'warn'
}

npm install --save-dev eslint-plugin-react

import react from 'eslint-plugin-react'

// In your config:
plugins: {
  react
},
rules: {
  'react/prop-types': 'error'
}

​

PostCSS Configuration

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

​

Plugins

​

Tailwind CSS Plugin

• Transforms @tailwind directives
• Generates utility classes based on configuration
• Removes unused styles in production

​

Autoprefixer

• Targets browsers based on browserslist configuration
• Adds -webkit-, -moz-, -ms- prefixes as needed
• Removes outdated prefixes

/* Input */
.example {
  display: flex;
  user-select: none;
}

/* Output */
.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

​

Browser Targets

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

​

Adding More Plugins

npm install --save-dev postcss-nesting

export default {
  plugins: {
    'postcss-nesting': {},
    tailwindcss: {},
    autoprefixer: {},
  },
}

npm install --save-dev cssnano

export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
  },
}

​

Configuration Best Practices

​

Related Resources

• Vite Configuration Reference
• Tailwind Configuration
• ESLint Configuration
• PostCSS Documentation