¿Cómo iniciar el primer proyecto con TailwindCSS?

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.

¿CSS puro o Framework CSS?

CSS o Framework CSS

No voy a discutir si existe tal como como “el mejor framework” pero si es importante saber en que comento escribir CSS puro o usar en Framework CSS.

Estoy convencido que cada una de las herramientas tiene su mejor “caso de uso” y que lo que podría en un proyecto ser una ventaja es un desventaja en otro.

Me gusta escribir CSS puro, pero amo escribir con Stylus como preprocesador.

Por lo que este post esta lleno de impresiones personales.

Hablemos de los 4 frameworks que he aprendido/usado en los últimos días.

Bootstrap

El rey, no de la satisfacción y eso no es mi impresión.

Eso lo dice el reporte del “estado de CSS”.

Bootstrap es el más reconocido y es más que solo clases.

Su paradigma incluye componentes y si sabes usar Sass puede ampliar por mucho todas sus funcionalidades.

Una grilla, clara muy útil para entender el funcionamiento de las grillas en el mundo móvil

Es importante darle su lugar, es muy bueno, fue el primero que aprendí a usar.

No me gusta que use JQuery (gusto personal) no significa que no se pueda “quitar” pero tendrías que escribir JS puro en sus componentes.

Y no me gusta para nada sus “menus responsive”.

Foundation

El virey, pero muy abajo en cuanto a satisfacción y si, creo que aún no está en el estado de competir fuertemente con otros, aún necesita maduración.

Si quieres sacarle jugo necesitas ser un poco metódico y seguir una serie de pasos.

La herramienta para crear Email Responsive me parece ¡increible!

Escribes <row> y <columns> y lo convierte en <table> eso es amor hecho código.

Nadie hace nada similar y para los que estamos haciendo Email Marketing es fabuloso.

Una grilla limpia tan útil y flexible como la de Bootstrap.

Materialize

La apuesta de Google es fenomenal y ocupa el 3er lugar en fama. Tomando en cuenta que Google es el rey del mercado y Android es el rey del mercado (Google de nuevo) es indiscutible la necesidad de aprenderlo.

Sass de nuevo. Sí sabes usar Sass podrás ampliar mucho (¡mucho!) lo que puedes hacer con Materialize.

TailwindCSS

De nuevo, todo esto son impresiones personales. ¡Estoy enamorado! Tailwind me parece el mejor.

Muy coherente con sus clases.

Limpio, puede usar el JS que quieras como quieras sin que inyecte absolutamente nada.

Puedes crear tus clases personalizadas a partir de la directiva @apply

Pensado y diseñado considerando “Mobile First” (el mundo consume más la web hoy desde los móviles)

Es fenomenal.

Y en mi caso lo estoy aprendiendo junto a VueJS.

Los ausentes: 

Si sabes un puedes encontrar cierta “lógica” en todos.

Faltan:

  • Semantic UI
  • Bulma (quiero aprender bulma, en el estado de CSS es el segundo en satisfacción)

Ahora lo que nos incumbe desde el inicio ¿CSS puro o Framework? es indiscutible que debes saber y entender a profundidad CSS puro.

Y considero que el orden de aprender CSS debería ser:

  • CSS
    • Flex box
    • CSS Grid
    • Animaciones CSS
  • Preprocesadores
    • Less
    • Stylus (mi favorito)
    • Sass (el de más alta demanda en el mercado)
  • Framework
    • Bootstrap
    • Foundation (sobre todo la herramienta de Email)
    • Materialize
    • Bulma

No se trata de uno o bien el otro. Se trata de lo que mejor se ajuste al proyecto.

¿Cómo escribes CSS?