Guías bluuweb

Appearance

Return to top
On this page

Vite + Tailwind CSS

Configuraciones iniciales para trabajar con Vite y Tailwind CSS.

Extensiones

Instalación

Vite

sh
npm create vite@latest

Tailwind CSS

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

tailwind.config.cjs

js
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
};
css
@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

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

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

order class Tailwind

sh
npm install -D prettier prettier-plugin-tailwindcss