Taiwlind Part2

npm init -y

npm install tailwindcss postcss-cli autoprefixer

npx tailwindcss init -p

Rellenamos tailwind.css

Cambiamos los scripts del json por: "scripts": { "build": "postcss tailwind.css -o dist/css/styles.css", "watch": "postcss tailwind.css -o dist/css/styles.css --watch" },

Creamos la carpeta dist/css/styles.css y dist/index.html. IMPORTANTE Ejecutamos npm run build y se rellena el styles.css

Los tamaños por defecto de letra son 17

Aplicación PostCSS Language Support para que lea los @tailwind En el .json añadir "emmet.includeLanguages": { "postcss": "css" }

Instalamos npm install tailwindcss-debug-screens --save-dev tailwind.config.js plugins:[ require("tailwindcss-debug-screens"), ]

theme: { debugScreens: { position: ['top','left'], }, }

npm run build

y añadimos al index.html

npm run build

Si quiero aplicar estilos comunes para los h1 por ej, lo añado en tailwind.css

Para descargar una fuente de google, google fonts,download family. Descargar de static solo las necesarias para evitar peso. La añadimos en dist/fonts y en tailwind.css dentro de @layer base @font-face{ font-family: Monserrat; src: url(/dist/fonts/Montserrat/Montserrat-ExtraLight.ttf) formal("truetype"); } y en tailwind.config en theme, extend añadimos fontFamily:{ headline:['Montserrat'] }

Para usar iconos feather icons Elegimos el icono tamaño color etc y luego lo clickamos abrimos el enlace en el navegador y vemos codigo fuente, copiamos el código y lo insertamos en el html y añadimos flex al boton para que lo una. item-center para que quede centrado el icono y w-max para que el fondo vaya relacionado con las letras

Fondo HeroPatterns Copio el código que aparece y añado en tailwind.css body { codigo }

Configurar Alpinejs Google github alpinejs Seguir su instalación en https://github.com/alpinejs/alpine/blob/v2.8.2/README.es.md , ponemos en el head el script Descargamos en VSC la aplicación Alpine.js IntelliSense Esto nos permite generar variables por ejemplo

Previously used directives in Alpine.js ● x-data > to define variables ● x-bind, or short form “:” > to make attributes dynamic, e.g. the classes ● @click > to change variables with a click ● x-show > to show or hide elements dynamically ● x-text > to change text dynamically

npm install @fullhuman/postcss-purgecss Para reducir el peso de styles.css

En tailwind.config purge: { enabled: true, content: ['./dist/**/*.html'], },

Para borrar todo el git rm -Force .git

Cambiar configuración base tailwind Añadiendo dentro de tailwind.config.js

1. Podemos complementarla en extend spacing:{ 13:'3.25rem', },
2. Si lo hacemos al inicio, borraremos las otras configuraciones y solo quedará esta.

Configurar una tema de colores En tailwind.config Añadir const colors = require('tailwindcss/colors') Lo podemos añadir en theme o dentro de theme extend ej. colors: { transparent: 'transparent', current: 'currentColor', white: colors.white, black: colors.black, blue: colors.blue, yellow: colors.yellow, gray: colors.slate, turquoise: colors.cyan, green: colors.lime, red: colors.rose, },

Añadir gradiantes de colores Tailwind.config enabled: false, En HTML bg-gradient-to-b // Hacia donde genera el gradiente este caso to bottom from-blue-300 // Color con el que hace el gradiente. h-full // El gradiente es en toda la página no solo en la pantalla h-screen // Hace que el gradiente sea en toda la pántalla no en franjas bg-no-repeat // Añadiendolo no repite el screen completo solo mantiene el último color via-yellow-200 // Añade un color intermedio

Creamos una hoja de estilo común a la compañía company_styles.js, todos esos estilos los importamos a tailwind.config.js presets: [ require('./company_styles') ],

He borrado el purge pq creo que a partir de tailwind 3.0 no es necesario purge: { enabled: false, content: ['./dist/**/*.html'], },

Desactivar plugins en tailwind.config.js corePlugins: { //Dentro de aqui desactivamos el plugin que queramos. float:false, },