Diferencia entre revisiones de «Usuario:ManuelRomero/tailwind»
De WikiEducator
| Línea 72: | Línea 72: | ||
}} | }} | ||
| − | {{MRM_Actividad|Title= 3 Instalamos tailwindcss| | + | {{MRM_Actividad|Title= 3 Instalamos tailwindcss autoprefixer| |
<source lang=bash> | <source lang=bash> | ||
npm -i -D tailwindcss@latest autoprefixer@latest | 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> | ||
</source> | </source> | ||
*Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar) | *Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar) | ||
Revisión de 04:51 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
node -v
|
npm init -y
|
npm i -D postcss postcss-cli
|
module.exports = { plugins:[require('tailwindcss'), require('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>
|
npx tailwindcss init } *Nos creará el fichero de configuración '''''tailwindcss.config.js'''''
|
