Vite + Tailwind CSS
Configuraciones iniciales para trabajar con Vite y Tailwind CSS.
Links
Extensiones
- prettier-vscode
- Tailwind CSS intelliSense
- volar
- es7-react
- theme Nu disco
- material-icon
- svg-preview
- split-html-attributes
Instalación
sh
npm create vite@latest
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