Usuario:ManuelRomero/tailwind

De WikiEducator
< Usuario:ManuelRomero
Revisión a fecha de 21:13 20 ene 2023; ManuelRomero (Discusión | contribuciones)

(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
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
{{{1}}}




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 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;
  • 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)





Icon activity.jpg
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
@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'''''
  • Indicando que tenemos instalado tailwind y autoprefixer (en realidad lo tenemos que instalar)





Icon activity.jpg
Agregamos los script
  • En el fichero package.json que se creo, añadimos dos scripts (o lo que necesitemos)

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"
  }



Taildwind y Vue

  • Si quiero añadir un @apply en un componente vue en laravel, ha de existir un fichero de configuración para 'postcss. No lo entiendo muy bien, pero lo he copiado y funciona.
const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
        './resources/**/*.vue',
        './resources/**/*.js'
    ],
    whitelistPatterns: [ /-(leave|enter|appear)(|-(to|from|active))$/, /data-v-.*/, /v-deep/ ],
    whitelistPatternsChildren: [ /pretty$/, /xmx-.*$/, /^(.*?)\.tooltip/ ],
    defaultExtractor: content => content.match(/[\w-/.:]+(?<!:)/g) || []
})
 
module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...process.env.NODE_ENV === 'production' ? [purgecss] : []
    ]
}