Diferencia entre revisiones de «Usuario:ManuelRomero/tailwind»

De WikiEducator
Saltar a: navegación, buscar
 
(3 revisiones intermedias por el mismo usuario no mostrado)
Línea 39: Línea 39:
 
  https://www.youtube.com/watch?v=edWzRinWsRs
 
  https://www.youtube.com/watch?v=edWzRinWsRs
 
*Vemos la instalación vía '''''postcss'''''
 
*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
+
*<span style='r'>postcss</span> 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
 
*Debemos tener node y npm instalado en el sistema
 
{{MRM_Actividad|Title=Verificar node|
 
{{MRM_Actividad|Title=Verificar node|
Línea 59: Línea 59:
 
   npm i -D postcss postcss-cli
 
   npm i -D postcss postcss-cli
 
</source>
 
</source>
−
*i de instalación y -D para hacerlo local a este proyecto (no es una instalación global
+
*<span style='4'>i</span> de instalación
 +
*<span style='4'>-D</span> para hacerlo local a este proyecto (no es una instalación global)
 
}}
 
}}
 
{{MRM_Actividad|Title= 2.2 -Configuramos postcss|
 
{{MRM_Actividad|Title= 2.2 -Configuramos postcss|
Línea 72: Línea 73:
 
}}
 
}}
  
−
{{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 '''''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;
 
</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 89: Línea 95:
 
*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>
 +
}}
 +
===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.
 +
<source lang=javascript>
 +
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] : []
 +
    ]
 +
}
 +
</source>
 +
*Sacado de  https://pretagteam.com/question/apply-not-working-inside-vue-component-in-laravel-mix

Última revisión de 21:13 20 ene 2023

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] : []
    ]
}
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/tailwind&oldid=30198»