Diferencia entre revisiones de «Usuario:ManuelRomero/tailwind»
| Línea 76: | Línea 76: | ||
npm -i -D tailwindcss@latest autoprefixer@latest | npm -i -D tailwindcss@latest autoprefixer@latest | ||
} | } | ||
| − | Autoprefixer es un plugin que usa | + | *'''''Autoprefixer''''' es un plugin que usa '''''postcss''''' 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> | <source lang=css> | ||
-webkit-user-select:none; | -webkit-user-select:none; | ||
-moz-user:none; | -moz-user:none; | ||
-ms-user:none; | -ms-user:none; | ||
| − | |||
</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) | ||
| Línea 94: | Línea 93: | ||
</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) | ||
| + | }} | ||
| + | |||
| + | {{MRM_Actividad|Title=Creamos el fichero con el contenido de tailwindcss| | ||
| + | *Tailwind separa todo el código en directivas y así, podemos seleccionar cargar aquellas que vayamos a utilizar | ||
| + | *Para ello creamos el fichero '''''tailwind.css''''' y añadimos las ''directivas'' | ||
| + | *El fichero lo podemos agregar donde queramos, p.e. ./src/tailwind.css | ||
| + | <source lang=bash> | ||
| + | @tailwind base; # para eliminar el estilo que por defecto que tiene algunos componentes html por parte del navegador(p.e. href suele aparecer en azul ... | ||
| + | @tailwind components; # componentes que ha creado tailwind en su página oficial que no los contiene el propio tailwind | ||
| + | @tailwind utilities;#El código de todas las utilidades que tiene tailwind | ||
| + | } | ||
| + | *Nos creará el fichero de configuración '''''tailwindcss.config.js''''' | ||
| + | </source> | ||
| + | *Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar) | ||
| + | }} | ||
| + | |||
| + | {{MRM_Actividad|Title=Agregamos los script| | ||
| + | *En el fichero '''''package.json''''' que se creo, añadimos dos scripts (o lo que necesitemos) | ||
| + | <source lang=js> | ||
| + | "scripts": { | ||
| + | "buid": "postcss ./src/tailwind.css -o ./estilos/estilo.css" | ||
| + | "watch": "postcss ./src/tailwind.css -o ./estilos/estilo.css --watch" | ||
| + | } | ||
| + | </source> | ||
}} | }} | ||
Revisión de 05:08 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 '''''postcss''''' 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;
|
npx tailwindcss init } *Nos creará el fichero de configuración '''''tailwindcss.config.js'''''
|
@tailwind base; # para eliminar el estilo que por defecto que tiene algunos componentes html por parte del navegador(p.e. href suele aparecer en azul ... @tailwind components; # componentes que ha creado tailwind en su página oficial que no los contiene el propio tailwind @tailwind utilities;#El código de todas las utilidades que tiene tailwind } *Nos creará el fichero de configuración '''''tailwindcss.config.js'''''
|
Idioma no válido. Necesita especificar un idioma como esto: <source lang="html4strict">...</source> lenguajes soportados para sintaxis remarcada: 4cs, 6502acme, 6502kickass, 6502tasm, 68000devpac, abap, actionscript, actionscript3, ada, algol68, apache, applescript, apt_sources, arm, asm, asp, asymptote, autoconf, autohotkey, autoit, avisynth, awk, bascomavr, bash, basic4gl, bf, bibtex, blitzbasic, bnf, boo, c, c_loadrunner, c_mac, caddcl, cadlisp, cfdg, cfm, chaiscript, cil, clojure, cmake, cobol, coffeescript, cpp, cpp-qt, csharp, css, cuesheet, d, dcl, dcpu16, dcs, delphi, diff, div, dos, dot, e, ecmascript, eiffel, email, epc, erlang, euphoria, f1, falcon, fo, fortran, freebasic, freeswitch, fsharp, gambas, gdb, genero, genie, gettext, glsl, gml, gnuplot, go, groovy, gwbasic, haskell, haxe, hicest, hq9plus, html4strict, html5, icon, idl, ini, inno, intercal, io, j, java, java5, javascript, jquery, kixtart, klonec, klonecpp, latex, lb, ldif, lisp, llvm, locobasic, logtalk, lolcode, lotusformulas, lotusscript, lscript, lsl2, lua, m68k, magiksf, make, mapbasic, matlab, mirc, mmix, modula2, modula3, mpasm, mxml, mysql, nagios, netrexx, newlisp, nsis, oberon2, objc, objeck, ocaml, ocaml-brief, octave, oobas, oorexx, oracle11, oracle8, oxygene, oz, parasail, parigp, pascal, pcre, per, perl, perl6, pf, php, php-brief, pic16, pike, pixelbender, pli, plsql, postgresql, povray, powerbuilder, powershell, proftpd, progress, prolog, properties, providex, purebasic, pycon, pys60, python, q, qbasic, rails, rebol, reg, rexx, robots, rpmspec, rsplus, ruby, sas, scala, scheme, scilab, sdlbasic, smalltalk, smarty, spark, sparql, sql, stonescript, systemverilog, tcl, teraterm, text, thinbasic, tsql, typoscript, unicon, upc, urbi, uscript, vala, vb, vbnet, vedit, verilog, vhdl, vim, visualfoxpro, visualprolog, whitespace, whois, winbatch, xbasic, xml, xorg_conf, xpp, yaml, z80, zxbasic "scripts": {
"buid": "postcss ./src/tailwind.css -o ./estilos/estilo.css"
"watch": "postcss ./src/tailwind.css -o ./estilos/estilo.css --watch"
}
|
