Usuario:ManuelRomero/tailwind

De WikiEducator
Saltar a: navegación, buscar

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


Icon activity.jpg
Verificar node
node -v





Icon activity.jpg
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





Icon activity.jpg
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





Icon activity.jpg
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)





Icon activity.jpg
3 Instalamos tailwindcss
npm -i -D tailwindcss@latest autoprefixer@latest
}
  • Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar)





Icon activity.jpg
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)