Pasos para crear un proyecto React con Typescript y TailwindCSS

Para crear un proyecto React, en principio solo te hace falta escribir el siguiente comando en la consola:

npx create-react-app NombreDeTuApp
cd NombreDeTuApp

Por supuesto, eso asumiendo que tienes Node.js instalado para poder usar npm en una versión superior a la 5.2.0, que trae consigo la instalación de npx. Si no lo tuvieras, tendrías que ir a la siguiente web a descargarlo: https://nodejs.org/en/.

Si bien es cierto que no necesitas este tipo de herramientas porque puedes – y citando a la web oficial de React – añadir tan solo dos tags básicos y luego los de cada componente.

  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- Tu componente -->
  <script src="like_button.js"></script>

Es una forma bastante más engorrosa porque te ensucia el HTML, a mi parecer; sin embargo es muy útil si sólo quisieras añadir React en páginas específicas y no crear todo un proyecto basado en React.

Si te has decido por crear el proyecto react en su totalidad, entonces puedes usar el comando del inicio y estarías listo. Sin embargo, si quieres añadir Typescript a la ecuación, el comando que deberías usar es ligeramente distinto:

npx create-react-app NombreDeTuApp --template typescript
cd NombreDeTuApp

Así Typescript queda integrado desde el inicio e incluso los componentes iniciales ya se colocan con formato «.tsx» en vez de «.jsx». Por otra parte, e independiente de si has elegido la ruta de Typescript o de React puro, puedes instalar Tailwind una vez hayas creado la app utilizando estos dos comandos en sucesión:

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

Con esto se generan e inicializan los módulos y archivos que TailwindCSS necesita por defecto. Dentro de esos archivos que necesita, verás que te ha generado un archivo en la carpeta padre llamado «tailwind.config.js». En este archivo necesitamos indicarle que el contnido con el que va a trabajar tiene formatos js, jsx, ts o tsx:

content: [
    './src/**/*.{js,jsx,ts,tsx}',
],

Y ya por último ir a nuestro archivo css base, que es el que encontrarás en la carpeta «src» y se llama «index.css». En este archivo, en la parte superior, importamos módulos de Tailwind para poder utilizarlos en nuestro css:

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

Hecho esto ya deberías poder hacer uso de tanto Tailwind como Typescript en tu proyecto, por lo que lo puedes probar con algún componente simple dentro de App.tsx:

import './App.css';

interface MiBotonProps{
  contenido:string
}

function MiBoton(props:MiBotonProps){
  return (
    <button className="font-medium bg-emerald-200 p-3 rounded uppercase" type="button">
      {props.contenido}
    </button>
  )
}

export default function App() {
  return (
    <div className="App flex justify-center items-center h-screen">
      <MiBoton contenido={"Hello there!"} />
    </div>
  );
}