Usuario:ManuelRomero/tailwind

Tailwind: qué es

• Lo podemos ver como un frameword de css
• Es una tecnología relativamente nueva y es una forma cómoda y muy flexible de usar css basado en clases
• La primera versión 1/11/2017

Instalación

 npx tailwindcss-cli@latest build -o tailwind.css

 npm install tailwindcss@latest postcss@latest autoprefixer@latest

• Usando el CDN, no se recomienda su uso, ya que se limitaría su uso

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

• Opcional puedes crear una fichero de configuración

 npx tailwindcss init

Esto creará un fichero en el directorio principal del proyecto : tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Instalar en un proyecto independiente

https://www.youtube.com/watch?v=edWzRinWsRs

• Vemos la instalación vía postcss

postcss es un post procesador de css que trabaja con css y nos va a permitir tener un control sobre el css generado, y además podemos insertar javascript para controlar ese css

• Debemos tener node y npm instalado en el sistema

Verificar node

node -v

1.- Inicializamos el proyecto

Una vez creada inicializamos la carpeta con npm (en la carpeta raíz del proyecto npm init -y Este nos genera un fichero llamado pakage.json Con este fichero vamos a poder controlar los paquetes que vayamos instalando

2.1-Instalamos postcss

npm i -D postcss postcss-cli i de instalación y -D para hacerlo local a este proyecto (no es una instalación global

2.2 -Configuramos postcss

Creamos dentro de la carpeta postcss el fichero de configuración postcss.config.js module.exports = { plugins:[require('tailwindcss'), require('autoprefixer')], } Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar)

3 Instalamos tailwindcss autoprefixer

npm -i -D tailwindcss@latest autoprefixer@latest } Autoprefixer es un plugin que usa tailwind para tener autoprefijos, que son palabras que se incluyen en algunas propiedades de css para que sean soportadas por los diferentes navegadores (palabras que se ponen delante de las propiedades junto con guiones ) <source lang=css> -webkit-user-select:none; -moz-user:none; -ms-user:none; </source> Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar)

3.1 Creamos el fichero de configuración de tailwindcss

En el mismo directoerio donde creamos el fichero de configuración de postcss npx tailwindcss init } *Nos creará el fichero de configuración '''''tailwindcss.config.js''''' Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar)