¿Cómo iniciar el primer proyecto con TailwindCSS?

TailwindCSS es amor puro. Y hoy aprendermos las bases para desarrollar nuestro primer proyecto en TailwindCSS. Es básico (necesario, indispensable) que sepas HTML y CSS para usar TailwindCSS.

Vale la pena aclarar que es necesario (basico, indispensable) que le pierdas el miedo a la terminal. Con todo siempre lo mejor es la documentación oficial.

Ya sea que uses, el sub-system de linux en Windows, MacOS o Ubuntu (Linux) no le tengas miedo a la terminal. La terminal es poder.

Entremos en materia:

¿Qué necesito para iniciar el primer proyecto con TailwindCSS?

Idealmente debes tener los archivos con los que fue diseñado el sitio o la App, ya sea Photosop, Illustrator o en el mejor de los casos: AdobeXD, Figma o Sketch.

Con eso debes tener instalado NodeJS en tu computadora.

Te recomiendo Visual Studio Code, que además tiene un plugin que te ayudará a escribir las clases de Tailwind más rápidamente.

El paso a paso:

Crea la carpeta base del proyecto, por ejemplo: portafolio_personal, luego crea por lo menos dos carpetas más: public (donde tendremos los archivos finales) y source (donde tendremos los archivos de CSS en este caso)

Se tendría que ver algo así:

Carpetas
Carpetas para ejecutar el proyecto

 

 

 

 

 

Inicia git, ahora vamos a iniciar npm en la carpeta portafolio_personal y se ve algo así:

npm init
Iniciando Git y NPM

 

 

 

 

 

ahora vamos a instalar TailwindCSS, postcss y autorefixer

luego de eso vamos a iniciar tailwindcss y a crear el archivo de configuración de postcss

ahora vamos a “requerir” en “modules” de postcss tanto a TailwindCSS como autoprefixer

en la carpeta source podemos crear el archivo de “origen” puedes llamarlo como quieras, yo lo he llamado base.css

A base.css agregamos las siguientes tres directivas:

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

Es posible que tu editor muestre errores al escribir estas líneas. No te preocupes.

ahora vamos a editar el archivo package.json para crear un “controlador” watcher que estará pendiente del archivo de origen y con live-server podremos hacer que la página se cargue automáticamente por cada uno de los cambios que hagamos.

**Es posible que tengas que crear las carpetas manualmente o se crearán de forma automática al ejecutar el script por primera vez.

Por último podemos crear un index.html en la carpeta /public y claro, vincular nuestra hoja de estilo

Listo, tenemos todo listo, ahora podemos ejecutar nuestro “controlador” desde la carpeta raíz en nuestra terminal.

Adicional a esto puedes usar “purgeCSS” para incluir solo el CSS necesario en el archivo que subirá a producción.

Con lo anterior estas listo para iniciar el primer proyecto con TailwindCSS.

Deja una respuesta