Instalación de React con Vite y TailwindCSS

Me parece que las Tailwind directives se ponen en el archivo index.css

Hay una extension de tailwind en vscode:

![](

sirve mucho para ayudarte con las clases

les dejo aqui los codigos de la terminal:

npm create vite@latest my-project -- --template react
cd my-project

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

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

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

npm run dev

Me parecio gracioso. 😂

Hola Mundo bebé  

Para que VScode les muestre recomendaciones a la hora de escribir Tailwind, pueden instalar la extensión “Tailwind CSS IntelliSense”

Vamos a crear el proyecto, considerar instalar vite, para alejarnos de configuraciones y sólo crear componentes y además instalar tailwind.

Para instalar vite:

npm create vite@latest

Y proseguimos con eliminar los assets que no necesitamos en este momento

Después instalaremos tailwind CSS:

con la documentación en: https://tailwindcss.com/docs/guides/vite

1. empezamos por en la consola con el directorio de nuestro proyecto abierto con: npm install -D tailwindcss postcss autoprefixer

2. proseguimos con: npx tailwindcss init

• seguir con el resto de la documentación de configuración de tailwind (arriba el link).

*recuerda agregar las directivas de Tailwind a la carpeta: ./src/index.css

Y finalizar corriendo el proyecto con: npm run dev

5-Copiar el siguiente código en tu tailwind.config.js: content: [ "./index.html", "./src/**/*.{js,ts,jsx,tsx}", ], 6- Copia en el App.css lo siguiente: @tailwind base; @tailwind components; @tailwind utilities;

Bueno empezamos con toda. Después de mucho tiempo y tener que regresar a las bases de javaScript y CSS varias veces, arranco con este proyecto adicionando TypeScript !!!

Vamo a darle !!!

Cuando uses react con vite selecciona Javascript+swc
es 20 veces mas rapido

/* Importar las directivas de Tailwind CSS */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

/* Agregar estilos personalizados si es necesario */
/* Por ejemplo:
   .mi-boton-personalizado {
     background-color: purple;
     color: white;
     padding: 8px 16px;
   }
*/

Pasos para iniciar proyecto con Vite y Talwind 1- npm create vite@latest 2- Elegir React como framework, luego JavaScript. 3- Si se está usando vite, ir a la documentación de Tailwind, presionar get started, luego Frameworks Guides donde dice vite. 4- Entrar al directorio y ejecutar los siguientes comandos en la terminal: npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p

Comando npm + vite

npm create vite@latest

Es bueno darle una mirada a Get Started de Vite.
https://vitejs.dev/guide/

Aqui dejo mi aporte no solo le coloque color de fondo sino que también al texto:

Les dejo si lo quieren hacer con otros package managers 😄

# npm 6.x
npm create vite@latest my-vue-app --template react

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template react

# yarn
yarn create vite my-vue-app --template react

# pnpm
pnpm create vite my-vue-app --template react

Hola mundo bebé .😍

Les comparto la guia de Talwiindcss 😎
Guia Tailwind

Aquí mi Hola mundo

“dev”: “vite --host 0.0.0.0 --port 3000”

para no cambiar el puerto de docker con node corriendo en el clásico puerto 3000

Asi mi primer Hola mundo con vite

esto es emocionante vamos con toda

Si no quieren instalar vite. Puede usar:

npx create-vite react-course vite@latest

Wow!!! Estefania es una de las mejores instructoras de Platzi, estoy tan emocionado de lo que vendrá mas adelante en el curso.

que bien con Vite!!!