Diferencia entre revisiones de «Usuario:ManuelRomero/tailwind»

Revisión de 04:45 11 dic 2021

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

npm -i -D tailwindcss@latest autoprefixer@latest } 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)