Vite + Tailwind CSS

Configuraciones iniciales para trabajar con Vite y Tailwind CSS.

Links

• tailwindcss.com
• vitejs

Extensiones

• prettier-vscode
• Tailwind CSS intelliSense
• volar
• es7-react
• theme Nu disco
• material-icon
• svg-preview
• split-html-attributes

Instalación

Vite

npm create vite@latest

Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

tailwind.config.cjs

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

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

prettierrc

.prettierrc

{
    "semi": true,
    "tabWidth": 4,
    "printWidth": 80,
    "useTabs": false,
    "singleQuote": false,
    "trailingComma": "es5"
}

vite alias @

• alias @ src: así no te preocupas por el anidamiento de los componentes.

vite.config.js

import { defineConfig } from "vite";
import * as path from "path";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
    },
});

Crear archivo jsconfig.json

• jsconfig
• intellisense viajar archivo al hacer click

{
    "compilerOptions": {
        "baseUrl": ".",
        "target": "es6",
        "paths": {
            "@/*": ["./src/*"]
        }
    },
    "exclude": ["node_modules"]
}

order class Tailwind

• order class

npm install -D prettier prettier-plugin-tailwindcss