Creación De animaciones Personalizadas Con Tailwind CSS

Tailwind CSS es un marco de CSS de primera utilidad que ha mostrado un tremendo crecimiento en su adopción, lo que lo convierte en una opción popular para todas sus necesidades de estilo. Si bien le permite crear sitios web modernos sin escribir una sola línea de CSS, diseñar un sitio web es solo una parte de brindar una experiencia de usuario positiva.

La creación de interacciones significativas a través de animaciones también juega un papel importante para captar la atención del visitante, y pueden llevar su sitio web al siguiente nivel. En esta publicación, aprenderá a usar animaciones CSS con Tailwind CSS, explorará las animaciones integradas con las que viene y creará animaciones personalizadas para ese estilo adicional.

Uso de animaciones CSS integradas con Tailwind CSS

Las animaciones CSS son un módulo CSS que le permite animar los valores de las propiedades CSS a través de fotogramas clave. La naturaleza de estas animaciones de fotogramas clave se puede modificar modificando sus propiedades, como la duración, la función de aceleración, la dirección, el retraso y más.

Al igual que otras propiedades y módulos CSS, Tailwind CSS también incluye algunas clases de utilidades para animaciones CSS. De forma predeterminada, viene con cuatro animaciones básicas: giro, pulso, ping y rebote.

Estas clases de utilidad tienen el prefijo de la animatepalabra clave, como animate-spino animate-pulse. Tomemos la animate-spinutilidad como ejemplo.

Esta clase de utilidad se usa para agregar una animación de giro lineal e infinito a sus elementos HTML. Esto es especialmente útil para cargar indicadores, como los que puede encontrar en un botón en los formularios.

Aquí hay un fragmento de código que le muestra cómo agregar una animación giratoria infinita a un SVG. Puede alternar esta clase de utilidad según el estado de su aplicación.

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Loading...
</button>

El uso de animación en tales casos ayuda al usuario a comprender que su acción ha sido reconocida y que se está desencadenando la respuesta adecuada. Además de la funcionalidad, las animaciones también se pueden usar solo por estética.

Para ver las otras animaciones integradas en acción, le recomiendo que consulte la documentación oficial de Tailwind CSS . El uso de CSS incorporado para animaciones es ideal para proyectos que ya tienen una hoja de estilo dedicada vinculada al marcado y no requieren Tailwind CSS como dependencia.

Creación de animaciones personalizadas en Tailwind CSS

Si bien las cuatro animaciones CSS integradas pueden ser suficientes para algunos casos de uso general, es posible que no desee limitarse solo a estos. Las animaciones son muy específicas del proyecto y tal vez desee utilizar animaciones personalizadas en su lugar.

Afortunadamente, no es necesario crear una nueva hoja de estilo y vincularla a su marcado solo para agregar una nueva animación a su aplicación. En su lugar, defina los fotogramas clave de su animación y amplíe la configuración del tema para crear una nueva animación.

Supongamos que queremos crear una animación de mano que agita como la de arriba y usarla con Tailwind CSS. Así es cómo.

Agregar @keyframesa un archivo de configuración Tailwind CSS

Primero, debemos definir una regla de fotogramas clave para la animación. La @keyframesregla arroba CSS se utiliza para definir el valor de las propiedades CSS de un elemento durante los puntos de ruta inicial, intermedio y final de la animación. A través de esto, puede tener múltiples estilos diferentes en diferentes etapas de la animación.

Si es nuevo en los fotogramas clave o no está familiarizado con su sintaxis, consulte esta publicación de blog .

En CSS simple, así es como se verán nuestros fotogramas clave para esta animación:

@keyframes wave {
  0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

Abra el tailwind.config.jsarchivo dentro de la raíz del directorio de su proyecto y cree un keyframesobjeto vacío dentro theme.extend. Ahora, dentro de este keyframesobjeto, agreguemos nuestra nueva animación de onda y definamos su comportamiento.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
    },
  },
  plugins: [],
}

La contentmatriz en su archivo de configuración CSS de Tailwind puede verse diferente para usted según el marco o la biblioteca frontend que esté utilizando, si corresponde. Pero lo principal en lo que hay que centrarse en el fragmento anterior es el keyframesobjeto.

Extendiendo el tema en Tailwind CSS

Ahora que hemos agregado la regla de fotogramas clave a nuestro objeto de tema dentro tailwind.config.js, agreguemos nuestra animación personalizada que usa esta regla. Podemos personalizar la duración de la animación, el retraso, las iteraciones, la función de tiempo y más.

Supongamos que queremos que la animación haga una transición lineal durante dos segundos en cada ciclo y sigamos animando infinitamente. Así es como debería verse la propiedad abreviada de animación CSS:

animation: wave 2s linear infinite;

Wavees el nombre de la regla de fotogramas clave que definimos anteriormente. 2sse usa para denotar que esta animación debe hacer una transición de dos segundos en un ciclo, y linearse usa para denotar que queremos que la función de aceleración sea lineal y infiniteque la mantenga animada perpetuamente.

Agreguemos esta animación dentro tailwind.config.jsdel theme.extend.animationobjeto:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
      animation: {
        'waving-hand': 'wave 2s linear infinite',
      },
    },
  },
  plugins: [],
}

Las clases de utilidad se generan en función de las claves del animationobjeto. Debido a que hemos utilizado waving-handcomo clave para esta animación, debemos agregar animate-waving-handel elemento que queremos animar en nuestro marcado, así:

<h1 class="flex font-semibold text-purple-600">
  Hello <span class="animate-waving-hand">👋🏻</span>, LogRocket Blog
</h1>

¡Voila! Ha creado con éxito su animación personalizada para su aplicación Tailwind CSS. Para agregar más animaciones, puede seguir los mismos pasos: agregue los fotogramas clave al theme.extend.keyframesobjeto, luego agregue la animación a theme.extend.animation.

Uso de valores arbitrarios para animaciones personalizadas únicas en Tailwind CSS

Si bien definir animaciones dentro del archivo de configuración CSS de Tailwind es la forma ideal para animaciones reutilizables, es posible que no desee hacerlo para una animación única que solo usará una vez en toda su aplicación.

Claro, podría definir otra animación dentro theme.extend.animation, pero Tailwind CSS le ofrece una mejor manera de abordar tales escenarios a través de valores arbitrarios . Para usarlos, ajuste las propiedades de la animación, separadas por guiones bajos, dentro de un par de corchetes después de la animatepalabra clave en el marcado, así:

animate-[animationName_easingFunction_durationInSeconds_iterationsCount_delayInSeconds_direction]

Supongamos que desea utilizar la misma waveregla de fotogramas clave, pero en lugar de animarla de forma lineal e infinita durante dos segundos cada vez, desea animarla solo dos veces durante cinco segundos con la ease-in-outfunción de sincronización.

Entonces, para nuestra nueva animación, la clase de utilidad debería verse así:

<h1 class="flex font-semibold text-emerald-500">
  Hello <span class="animate-[wave_5s_ease-in-out_2]">👋🏻</span>, arbitrary values
</h1>
<p class="text-center text-xs text-gray-400">
  Wave animation, 5 seconds duration, ease-in-out, 2 iterations
</p>
<pre className="text-center text-xs text-gray-500">
  animate-[wave_5s_ease-in-out_2]
</pre>

Conclusión

Gracias a la función de configuración de temas de Tailwind CSS, puede ampliar el tema predeterminado no solo para agregar colores personalizados, espaciado o puntos de interrupción, sino también a sus animaciones personalizadas sin compromisos ni hojas de estilo. Es por eso que Tailwind CSS es una opción tan popular para los desarrolladores. 

Fuente: https://blog.logrocket.com/creating-custom-animations-tailwind-css/

#css #tailwindcss

What is GEEK

Buddha Community

Hire CSS Developer

Want to develop a website or re-design using CSS Development?

We build a website and we implemented CSS successfully if you are planning to Hire CSS Developer from HourlyDeveloper.io, We can fill your Page with creative colors and attractive Designs. We provide services in Web Designing, Website Redesigning and etc.

For more details…!!
Consult with our experts:- https://bit.ly/3hUdppS

#hire css developer #css development company #css development services #css development #css developer #css

Tailwind CSS tutorial

In this tutorial I would like to introduce you to one of the fastest growing and promising CSS Frameworks at the moment, Tailwind CSS. It is different from other frameworks, such as Bootstrap, because it is built on a new way of building user interfaces using a utility-first CSS classes structure, as opposed to the OOCSS structure from other frameworks.

By the end of this guide you will be able to install, configure and build a responsive hero section (live demo) using the utility-first classes from Tailwind CSS and configure the project using the recommended PostCSS powered Tailwind configuration file for better maintainability and versatility.

Here’s the table of contents for this tutorial for Tailwind CSS:

• Introducing Tailwind CSS
• Adding Tailwind CSS to your project via a package manager
• Creating the configuration file and process your CSS with Tailwind
• Building a responsive hero section using the utility-first classes from Tailwind
• Customize fonts, colors and add extra classes using the configuration file
• Reduce loading time and file size by purging the unused classes from your CSS
• Conclusion and summary

Read the full tutorial from Themesberg.

#tailwind #tailwind-css #tailwind-css-tutorial #tutorial #open-source

Creación De animaciones Personalizadas Con Tailwind CSS

Tailwind CSS es un marco de CSS de primera utilidad que ha mostrado un tremendo crecimiento en su adopción, lo que lo convierte en una opción popular para todas sus necesidades de estilo. Si bien le permite crear sitios web modernos sin escribir una sola línea de CSS, diseñar un sitio web es solo una parte de brindar una experiencia de usuario positiva.

La creación de interacciones significativas a través de animaciones también juega un papel importante para captar la atención del visitante, y pueden llevar su sitio web al siguiente nivel. En esta publicación, aprenderá a usar animaciones CSS con Tailwind CSS, explorará las animaciones integradas con las que viene y creará animaciones personalizadas para ese estilo adicional.

Uso de animaciones CSS integradas con Tailwind CSS

Las animaciones CSS son un módulo CSS que le permite animar los valores de las propiedades CSS a través de fotogramas clave. La naturaleza de estas animaciones de fotogramas clave se puede modificar modificando sus propiedades, como la duración, la función de aceleración, la dirección, el retraso y más.

Al igual que otras propiedades y módulos CSS, Tailwind CSS también incluye algunas clases de utilidades para animaciones CSS. De forma predeterminada, viene con cuatro animaciones básicas: giro, pulso, ping y rebote.

Estas clases de utilidad tienen el prefijo de la animatepalabra clave, como animate-spino animate-pulse. Tomemos la animate-spinutilidad como ejemplo.

Esta clase de utilidad se usa para agregar una animación de giro lineal e infinito a sus elementos HTML. Esto es especialmente útil para cargar indicadores, como los que puede encontrar en un botón en los formularios.

Aquí hay un fragmento de código que le muestra cómo agregar una animación giratoria infinita a un SVG. Puede alternar esta clase de utilidad según el estado de su aplicación.

<button type="button" class="bg-indigo-500 ..." disabled>
  <svg class="animate-spin h-5 w-5 mr-3 ..." viewBox="0 0 24 24">
    <!-- ... -->
  </svg>
  Loading...
</button>

El uso de animación en tales casos ayuda al usuario a comprender que su acción ha sido reconocida y que se está desencadenando la respuesta adecuada. Además de la funcionalidad, las animaciones también se pueden usar solo por estética.

Para ver las otras animaciones integradas en acción, le recomiendo que consulte la documentación oficial de Tailwind CSS . El uso de CSS incorporado para animaciones es ideal para proyectos que ya tienen una hoja de estilo dedicada vinculada al marcado y no requieren Tailwind CSS como dependencia.

Creación de animaciones personalizadas en Tailwind CSS

Si bien las cuatro animaciones CSS integradas pueden ser suficientes para algunos casos de uso general, es posible que no desee limitarse solo a estos. Las animaciones son muy específicas del proyecto y tal vez desee utilizar animaciones personalizadas en su lugar.

Afortunadamente, no es necesario crear una nueva hoja de estilo y vincularla a su marcado solo para agregar una nueva animación a su aplicación. En su lugar, defina los fotogramas clave de su animación y amplíe la configuración del tema para crear una nueva animación.

Supongamos que queremos crear una animación de mano que agita como la de arriba y usarla con Tailwind CSS. Así es cómo.

Agregar @keyframesa un archivo de configuración Tailwind CSS

Primero, debemos definir una regla de fotogramas clave para la animación. La @keyframesregla arroba CSS se utiliza para definir el valor de las propiedades CSS de un elemento durante los puntos de ruta inicial, intermedio y final de la animación. A través de esto, puede tener múltiples estilos diferentes en diferentes etapas de la animación.

Si es nuevo en los fotogramas clave o no está familiarizado con su sintaxis, consulte esta publicación de blog .

En CSS simple, así es como se verán nuestros fotogramas clave para esta animación:

@keyframes wave {
  0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

Abra el tailwind.config.jsarchivo dentro de la raíz del directorio de su proyecto y cree un keyframesobjeto vacío dentro theme.extend. Ahora, dentro de este keyframesobjeto, agreguemos nuestra nueva animación de onda y definamos su comportamiento.

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
    },
  },
  plugins: [],
}

La contentmatriz en su archivo de configuración CSS de Tailwind puede verse diferente para usted según el marco o la biblioteca frontend que esté utilizando, si corresponde. Pero lo principal en lo que hay que centrarse en el fragmento anterior es el keyframesobjeto.

Extendiendo el tema en Tailwind CSS

Ahora que hemos agregado la regla de fotogramas clave a nuestro objeto de tema dentro tailwind.config.js, agreguemos nuestra animación personalizada que usa esta regla. Podemos personalizar la duración de la animación, el retraso, las iteraciones, la función de tiempo y más.

Supongamos que queremos que la animación haga una transición lineal durante dos segundos en cada ciclo y sigamos animando infinitamente. Así es como debería verse la propiedad abreviada de animación CSS:

animation: wave 2s linear infinite;

Wavees el nombre de la regla de fotogramas clave que definimos anteriormente. 2sse usa para denotar que esta animación debe hacer una transición de dos segundos en un ciclo, y linearse usa para denotar que queremos que la función de aceleración sea lineal y infiniteque la mantenga animada perpetuamente.

Agreguemos esta animación dentro tailwind.config.jsdel theme.extend.animationobjeto:

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      keyframes: {
        wave: {
          '0%': { transform: 'rotate(0.0deg)' },
          '10%': { transform: 'rotate(14deg)' },
          '20%': { transform: 'rotate(-8deg)' },
          '30%': { transform: 'rotate(14deg)' },
          '40%': { transform: 'rotate(-4deg)' },
          '50%': { transform: 'rotate(10.0deg)' },
          '60%': { transform: 'rotate(0.0deg)' },
          '100%': { transform: 'rotate(0.0deg)' },
        },
      },
      animation: {
        'waving-hand': 'wave 2s linear infinite',
      },
    },
  },
  plugins: [],
}

Las clases de utilidad se generan en función de las claves del animationobjeto. Debido a que hemos utilizado waving-handcomo clave para esta animación, debemos agregar animate-waving-handel elemento que queremos animar en nuestro marcado, así:

<h1 class="flex font-semibold text-purple-600">
  Hello <span class="animate-waving-hand">👋🏻</span>, LogRocket Blog
</h1>

¡Voila! Ha creado con éxito su animación personalizada para su aplicación Tailwind CSS. Para agregar más animaciones, puede seguir los mismos pasos: agregue los fotogramas clave al theme.extend.keyframesobjeto, luego agregue la animación a theme.extend.animation.

Uso de valores arbitrarios para animaciones personalizadas únicas en Tailwind CSS

Si bien definir animaciones dentro del archivo de configuración CSS de Tailwind es la forma ideal para animaciones reutilizables, es posible que no desee hacerlo para una animación única que solo usará una vez en toda su aplicación.

Claro, podría definir otra animación dentro theme.extend.animation, pero Tailwind CSS le ofrece una mejor manera de abordar tales escenarios a través de valores arbitrarios . Para usarlos, ajuste las propiedades de la animación, separadas por guiones bajos, dentro de un par de corchetes después de la animatepalabra clave en el marcado, así:

animate-[animationName_easingFunction_durationInSeconds_iterationsCount_delayInSeconds_direction]

Supongamos que desea utilizar la misma waveregla de fotogramas clave, pero en lugar de animarla de forma lineal e infinita durante dos segundos cada vez, desea animarla solo dos veces durante cinco segundos con la ease-in-outfunción de sincronización.

Entonces, para nuestra nueva animación, la clase de utilidad debería verse así:

<h1 class="flex font-semibold text-emerald-500">
  Hello <span class="animate-[wave_5s_ease-in-out_2]">👋🏻</span>, arbitrary values
</h1>
<p class="text-center text-xs text-gray-400">
  Wave animation, 5 seconds duration, ease-in-out, 2 iterations
</p>
<pre className="text-center text-xs text-gray-500">
  animate-[wave_5s_ease-in-out_2]
</pre>

Conclusión

Gracias a la función de configuración de temas de Tailwind CSS, puede ampliar el tema predeterminado no solo para agregar colores personalizados, espaciado o puntos de interrupción, sino también a sus animaciones personalizadas sin compromisos ni hojas de estilo. Es por eso que Tailwind CSS es una opción tan popular para los desarrolladores. 

Fuente: https://blog.logrocket.com/creating-custom-animations-tailwind-css/

#css #tailwindcss

Popular Tailwind CSS Plugins and Extensions - Themesberg Blog

By reading this article you will browse a list of the most popular plugins and extensions for the utility-first CSS framework, Tailwind CSS. Although the default code base of the framework already covers a lot of the needs when building user interfaces, you can never get enough plugins and extensions powered by the open-source community.

One of the requirements for a plugin to appear on this list is to be open-source with no other strings attached so that the developers browsing this list can stay assured that they can use the plugin for their Tailwind CSS powered project.

Check out the list of Tailwind CSS Plugins and Extensions on Themesberg.

#tailwindcss #tailwind #tailwind-css #tailwind-css-plugins #themesberg

Tailwind CSS Cheatsheet

Master Tailwind CSS with this Cheatsheet.

Tailwind CSS allows us to build modern websites with the respective classes without writing a single native CSS.

Just like other CSS libraries like Bootstrap, Tailwind also has responsive classes that we only need to specify in our application.

This article will get you up and started quickly with Tailwind to make beautiful websites and UIs.

Tailwind is amazing since we have to only to specify the respective classes and Tailwind CSS will take care of everything.

On top of that, we don’t have to worry about responsivity as all is taken care of by Tailwind on different devices.

A utility-first CSS framework packed with classes like flex, pt-4, text-centre and rotate-90 that can be composed to build any design, directly in your markup. From Tailwind.com.

In this article, we will see the most basic CSS classes and their relative properties in CSS.

#tailwind #css #tailwind-css #tailwindcss #web-development