Instalaci贸n de React con Vite y TailwindCSS

2/31
Recursos
Transcripci贸n

Aportes 47

Preguntas 10

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Les paso esta p谩gina donde podr谩n ver y buscar las clases que necesiten de CSS de una forma mucho m谩s r谩pida y sencilla: Tailwind Cheatsheet

Es distinto el comando para instalar el Tailwindcss en un proyecto creado por con VITE, les dejo la parte espec铆fica para Vite:
https://tailwindcss.com/docs/guides/vite

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

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

Hay una extension de tailwind en vscode:

![](

sirve mucho para ayudarte con las clases

Hola, recomiendo Flowbite. Es una p谩gina que tiene componentes ya hechos con clases de TailwindCSS. Es bastante 煤til.

Hola comunidad les comparto unos peque帽os apuntes en Notion sobre la clase, espero les sea de utilidad.
Link aqu铆:
https://bg99astro.notion.site/Instalaci-n-de-Vite-js-262d97cf1a33444186cadeb52f55f347

Para que VScode les muestre recomendaciones a la hora de escribir Tailwind, pueden instalar la extensi贸n 鈥淭ailwind CSS IntelliSense鈥

Me parecio gracioso. 馃槀

Hola Mundo beb茅  
Que caja esa profesora, como se expresa, parece que uno estuviera hablando con una amiga
Muy Buenas noches no me esta reconociendo los estilos del tailwindcss

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 !!!

隆Oye! Si te pasa como a m铆, que te metes en una carpeta para empezar a trabajar con Vite y el comando `npm create vite@latest` te crea todo dentro de una subcarpeta, dej谩ndote la original vac铆a, aqu铆 tienes la soluci贸n. Usa `npm create vite@latest .` (con un espacio y un punto al final). As铆, Vite se instala en la misma carpeta donde est谩s, sin crear una nueva. Pero ojo, si ya tienes cosas en esa carpeta, ten cuidado porque te puede pedir borrarlas. Solo se borran si t煤 escribes y (yes).
siento que en el texto por el acento hubiera quedado mejor "hola mundo mor"
Hola, alguien por favor me podr铆a explicar que es Vite y cual es su mayor ventaja contra Create React App ? Se pasa directamente a la instalaci贸n sin una explicaci贸n y qued茅 confundido.

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/

![](https://static.platzi.com/media/user_upload/image-2544494c-1649-42bb-b338-34279682e791.jpg)
![](https://static.platzi.com/media/user_upload/image-3940d734-4a00-42ba-b195-cbe9e930ff60.jpg)Hola, un atajo de teclado que pueden utilizar para no tener que copiar y pegar la direccion es control + click y automaticamente te lo abre en el navegador
```js import PropTypes from 'prop-types' const Layout = ({ children }) => { Layout.propTypes = { children: PropTypes.node.isRequired, } return (
{children}
) } export default Layout ```import PropTypes from 'prop-types' const Layout = ({ children }) => {聽 聽 Layout.propTypes = {聽 聽 聽 聽 children: PropTypes.node.isRequired,聽 聽 }聽 聽 return (聽 聽 聽 聽 \
聽 聽 聽 聽 聽 聽 {children}聽 聽 聽 聽 \
聽 聽 )} export default Layout
import PropTypes from 'prop-types' const Layout = ({ children }) => {聽 聽 Layout.propTypes = {聽 聽 聽 聽 children: PropTypes.node.isRequired,聽 聽 }聽 聽 return (聽 聽 聽 聽 \
聽 聽 聽 聽 聽 聽 {children}聽 聽 聽 聽 \
聽 聽 )} export default Layout
![](https://static.platzi.com/media/user_upload/image-8f8cbd27-e80f-4168-a1e2-a286092167cf.jpg)
Muy bien, vamos a probar con la versi贸n 5 de vite. ![](https://static.platzi.com/media/user_upload/image-79cecb88-d8bc-4b60-a244-510e660a50d5.jpg)
Que triste empezar un curso con todas las ganas y que la primer clase ya este mal hecha del inicio. Creo que mis ganas de aprender fuero de 100 a 0 en cuestion de minutos.
Algo que puede ayudar mucho es la extension de de vscode para tailwind => <https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss>

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

Parece que con la nueva interfaz se perdi贸 parte de la secci贸n de recursos, el link que teff consulta es este: <https://tailwindcss.com/docs/guides/vite> Y los comandos los de ac谩: `npm install -D tailwindcss postcss autoprefixer` `npx tailwindcss init -p` > En el archivo `tailwind.config.js` `/** @type {import('tailwindcss').Config} */` `export default {` ` content: [` ` "./index.html",` ` "./src/**/*.{js,ts,jsx,tsx}",` ` ],` ` theme: {` ` extend: {},` ` },` ` plugins: [],` `}`

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

鈥渄ev鈥: 鈥渧ite --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!!!