Crea tus propias utilerías

Para que les suceda como en el caso del profesor y solo tengan que guardar el archivo de css para que se actualicen los estilos, podemos añadir un script adicional a nuestro package.json, el cual es el siguiente:

"scripts": {
    "build": "postcss css/tailwind.css -o public/css/styles.css",
    "dev": "postcss css/tailwind.css -o public/css/styles.css --watch"
  },

Con esto solo tienen que ejecutar “npm run dev” en su terminal para que cada que guarden el archivo se actulize automaticamente.

*Nota: el comando dev continuara su ejecución hasta que le indiquemos lo contrario, para escaparla solo usa control + C en la terminal

Para que funcione el @variants y @responsive tienes que compilar el archivo css/tailwind.css y esto es corriendo el comando npm run build en la terminal en la carpeta del proyecto ‘platzifood’ cada vez que hagas un cambio supongo ooo otra opción es agregar un script en el archivo package.json que sería el siguiente:

Aegurate de poner style y no styles a mi me pasó xd
Por ultimo en la terminal en la carpeta del proyecto corres el comando npm run dev y estara watcheando cada cambio que hagas y se mostrará automáticamente.

Dado los cambios en la última versión de Tailwind para habilitar las variantes debes primero declararlas en el archivo tailwind.config.js

Del siguiente modo;

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    scale: ['hover'],
    rotate:['responsive'],
    extend: {},
  },
  plugins: [],
}

Luego en el archivo tailwind.css después de las utilidades se definen las funciones de las variantes acorde a lo que se busque realizar, del siguiente modo:

@tailwind base;
@tailwind components;
@tailwind utilities;

.responsive\.rotate-45 {
    transform: rotate(45deg);
  }

.hover\.zoom {
    transform: scale(2);
  }

Otra forma de agregar nuestras utilerías a las variantes hover y responsive es así:

Fuente de los deseos:
https://tailwindcss.com/docs/adding-new-utilities#using-css

También le puedes agregar transiciones y animaciones como css puro

Si no te funciona corre el comando

npm run build

dentro del directorio del proyecto

@variants hover{
	.zoom{
		transform: scale(2);
		transition: 2s
	}
}

@responsive {
	.rotate-45{
		transform: rotate(45deg);
		transition: 2s
	}
}

Desde la versión 3.0 de Tailwind CSS la directiva “@variants” quedó obsoleta.
Para lograr el efecto deseado pueden agregar la directiva @layers y seleccionar a cuál capa de Tailwind agregar una utilería.
Ejemplo para agregar la utilería zoom a “utilities”:

@layer utilities{
  .zoom {
    transform: scale(2)
  }
}

Después para que el estilo sea ejecutado onHover, pueden editar la clase en el HTML:

<div class="hover:zoom"></div>

para el dia 13 de abril del 2023, ami me funciono lo siguiente:

• agreagar un scrip adicional en package.json: "dev": "npx tailwindcss -i ./src/css/tailwind.css -o public/css/style.css --watch",
• en la configuracion de Tailwind: tailwind.config.js: content: [ './public/**/*.{html,js}', './src/**/*.{html,js}', ],
  y con esto ya funciona segun la documentacion de Tailwindcss

Recuerden recompilar el archivo css para que los cambios apliquen.

Documentación acerca de las variantes en Tailwind CSS: https://tailwindcss.com/docs/configuring-variants/

tailwind me gusta mucho<3, puede ser muy custom

SI lo anterior no te funciona agrega esto

"dev": "npx tailwindcss-cli@latest build -i css/tailwind.css -o public/css/style.css --watch"

ejecuta npm run dev en otra terminal dentro de visual studio.

Wuo aqui logre apreciar creo yo el gran poder de tailwind 💪

Para la última versión de Tailwind la directiva @variants está deprecated, En lugar de esta se puede usar @layer components y con esto ya se podría acceder a ciertos estados del elemento como hover o focus para aplicar nuestras propios estilos. Aquí más info

.my-rotate-45 {
  transform: rotate(45deg);
}

@layer components{
  .zoom{
    transform: scale(2);
  }
}

<div class="h-40 w-40 bg-green-500 mx-auto mt-16 hover:zoom">

</div>

¡Hola! comparto el código que usé para poder seguir esta clase

/* package.json */

 "scripts": {
    "build": "npx tailwindcss build css/tailwind.css -o public/css/style.css",
    "dev": "npx tailwindcss-cli@latest build -i css/tailwind.css -o public/css/style.css --watch"
  },

// tailwind.config.js

variants: {
    scale:['hover'],
    rotate:['responsive'],
    extend: {},
  },

/* tailwind.css */

.rotate-45 {
    transform: rotate(45deg);
}

.zoom {
    transform: scale(2);
}

// En cosola 

npm run dev

A mi no me funcionó nada 😦, ya probé compilando los archivos y con npm run dev también

En caso de que no se vean reflejados los cambios a la hora de agregar tus propias utilerías, lo que deben de hacer es compilar el archivo de tailwind.css con el siguiente comando:

npx tailwindcss-cli -i src/tailwind.css -o public/css/style.css --watch

si gustan pueden agragarlo en el archivo de package.json junto al script “build” hecho en las clases anteriores para usarlo desde la consola.

"scripts": {
    "build": "postcss src/tailwind.css -o public/css/style.css --watch",
    "compila": "npx tailwindcss-cli -i src/tailwind.css -o public/css/style.css --watch"
  },

En mi caso lo llame “compila”. Una vez guardado se pude utilizar desde la consola con el comando:

npm run compila

Mientras el script se esté ejecutando, los cambios se van a ir reflejando en el navegador

En Tailwind v3.2.2 recomienda ya no separar las directivas @variants y @responsive, sino que estos estén juntos en una misma directiva llamada @layout.

• Ahora el código quedaría así:

@layer utilities {
  .zoom {
    transform: scale(2);
  }

  .rotar-45 {
    transform: rotate(45deg);
  }
}

Fuente: TailwindCSS

segun la documentacion para añadir utierias se cambio la forma de hacerlo:
@layer utilities{ .zoom { transform: scale(2); } }

No me funciono nada ni las soluciones de los comentarios
f
😦

Tailwind es magia!!!

Como hace el profesor para que se le actualice el “css/style.css” de manera automática y ademas tener activo el servidor con “live-server”?

No me a resultado los últimos ejercicios con @variant y el @responsive tengo el mismo código que el profe pero el hover nada de nada

Un poco confusa la lectura anterior

Pense que Tailwindcss podia ser un dolor de cabeza, después de tantos años de boostrap, pero me equivoque, ahora entiendo por que Laravel 8 lo adaptó. Buenísimo.

Hola Alguien Pudo usar el grid de tailwind ?
[](https://tailwindcss.com/docs/grid-template-columns/
y no puedo hacer que funciones.

<section >
  <h1>Grid 100% real no Faque</h1>
  <div class="bg-blue-400 mt-4 mb-4">
    <div class="grid grid-cols-1  sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 p-4 bg-yellow-400">sdfsdsdsd</div>
    <div class="grid grid-cols-1  sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4 p-4 bg-yellow-900">sdfsdsdsd</div>
  </div>

saludos
?

Wooooow que nivel!!!

Los cambios echos no se mostraron, como puedo lograr que se muestren? tengo ya los cambios guardados en VSCODE sin embargo no se me muestran los cambios

Otra forma de hacer los imports de tailwind:

// tailwind.css
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

en lugar de:

// tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Para crear y extender las utilerias se deben agregar en el archivo “tailwind.css”

Puedes añadir animaciones css usando las funciones de tailwindcss
Aquí para más información

f