Usuario:ManuelRomero/tailwind
Contenido
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
- 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
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] : [] ] }