No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende Ingl茅s, Programaci贸n, AI, Ciberseguridad y mucho m谩s.

Antes: $249

Currency
$209
Suscr铆bete

Termina en:

3 D铆as
16 Hrs
49 Min
43 Seg
Curso de Tailwind CSS 1

Curso de Tailwind CSS 1

V铆ctor Yoalli Dom铆nguez

V铆ctor Yoalli Dom铆nguez

Crea tus propias utiler铆as

13/29
Recursos

Aportes 30

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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 鈥渘pm 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 鈥榩latzifood鈥 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
	}
}

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.

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 鈥渦tilities鈥:

@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>

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 鈥渂uild鈥 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 鈥渃ompila鈥. 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 鈥渃ss/style.css鈥 de manera autom谩tica y ademas tener activo el servidor con 鈥渓ive-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 鈥渢ailwind.css鈥

Puedes a帽adir animaciones css usando las funciones de tailwindcss
Aqu铆 para m谩s informaci贸n

f