How to do custom animate by blur in tailwind
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {
keyframes: {
blur: {
'0%': {filter: blur(2px)} ,
'100%': {filter: blur(3px)},
},
},
animation: {
'blur': 'blur 2s linear ',
},
},
},
plugins: [],
}
That not work for me .
I want to make animation to my pop-up window with blur
You must wrap your blur(0px) parameter with parenthesis ("blur(0px)").
You can take a look at the examples provided on the documentation page.
In tailwind, the keyframe's key needs to get a string as its value:
HTML:
<div class="bg-red-500 animate-blur"> ~ Blurry text ~ <div>
Config:
/** #type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
blur: {
'0%': { filter: "blur(0px)" },
'100%': { filter: "blur(5px)" },
}
},
animation: {
blur: 'blur 2s linear infinite',
}
},
},
plugins: [],
}
Tailwind-play
Related
I wanted to create an animation for my website. I use tailwind.css for styling.
module.exports = {
content: ["./index.html", "./src/**/*.{js,jsx}"],
theme: {
colors: {
primary: "#E51114",
secondary: "#434242",
lightGray: "#CCCCCC",
dimmedWhite: "#F5F5F5",
white: "#FFFFFF",
},
extend: {
keyframes: {
slideInOut: {
"0%": { transform: "translateX(calc(100% + 30px)" },
"10%": { transform: "translateX(0)" },
"90%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(100% + 30px)" },
},
},
// START
animation: {
slideInOut: "slideInOut 5s ease-in-out",
},
// END
},
},
plugins: [],
};
Whenever I extend theme in tailwind.config.cjs by adding "animation" property the problem occurs. If I delete just these 3 lines everything behaves normal.
The output I get (the problem):
You are missing closing parentheses in your keyframes values, so when you add in the animation configuration, it also adds the #keyframes definition and breaks the rest of the CSS. Try the following modification:
slideInOut: {
"0%": { transform: "translateX(calc(100% + 30px))" },
"10%": { transform: "translateX(0)" },
"90%": { transform: "translateX(0)" },
"100%": { transform: "translateX(calc(100% + 30px))" },
},
Is it possible to pass a value from html to the tailwind.config.js file?
I essentially want to do something similar to how we can pass a value from HTML to CSS using use custom properties. But instead passing it to the tailwind.config.js file.
For example, with HTML and CSS you can do:
.fill-color {
color: var(--color);
}
<div class="fill-color" style="--color: blue;">Test</div>
but in my project I need to pass in a variable like: 20 from the index.html file:
<div class="scroll" style="--variable-number: 20">Test</div>
So I can use it to set the keyframes percentage correctly: Tailwind.config.js file below
module.exports = {
extend: {
animation: {
scroll: 'scroll 25s linear infinite'
}
},
keyframes: {
scroll: {
'0%': {transform: 'translateX(0%)'},
'100%': {transform: 'translateX(NEED 20 VALUE HERE%)' },
}
},
}
Yes, you can do what you want to achieve, see this playground for a working example. Just add var(--percentage) to the translateX.
HTML:
<div class="animate-text-scroll" style="--percentage: 20%">Test</div>
Tailwind config:
module.exports = {
theme: {
extend: {
keyframes: {
'scroll': {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(var(--percentage))' },
},
},
animation: {
'text-scroll': 'scroll 2s linear infinite',
},
},
},
plugins: [],
}
Hope this helps.
You can achieve this using custom css variable and arbitrary values.
Heres a demo: https://play.tailwindcss.com/qEqKUVP8IQ
Whats happening:
First we define our custom keyframes and animation in the config. allowing it to read a css var like so:
extend: {
keyframes: {
scroll: {
'0%': {transform: 'translateX(0)'},
'100%': {transform: 'translateX(var(--scroll-distance))' },
}
},
animation: {
scroll: 'scroll 1s linear infinite'
},
},
then we can use arbitrary values in our class naming like so:
<div class="animate-scroll [--scroll-distance:20px]">Test</div>
<div class="animate-scroll [--scroll-distance:50px]">Test</div>
So same animation, but a custom distance on multiple elements.
The other option is to define a default value in the css file like so:
:root {--new-variable: red;}
and use it on an element
<div class="bg-[color:var(--new-variable)]">Test</div>
Hope that helps.
Currently am creating my first website.
I have added two custom animations within my tailwind.config.css, but only am able to use one of them.
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
animation: {
text: 'text 5s ease infinite',
},
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
}
},
keyframes: {
text: {
'0%, 100%': {
'background-size': '200% 200%',
'background-position': 'left center'
},
'50%': {
'background-size': '200% 200%',
'background-position': 'right center'
}
},
}
}
}
}
Here is my tailwind.config.css
I am able to use the animate-text, but not animate-wiggle.
Thanks,
The way you define the animations and keyframes isn't valid JSON, instead of
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
},
animation: {
text: 'text 5s ease infinite',
},
you should write it as
animation: {
wiggle: 'wiggle 1s ease-in-out infinite',
text: 'text 5s ease infinite',
},
The same holds for the keyframes section.
I have installed tailwind successfully and I have implemented when I put inside class. The problem is that I wanted to put it in #apply. I don't have any idea why isnt it working
https://i.stack.imgur.com/8dOg2.png
.active {
#apply border-r-4 border-green-400;
}
tailwind config
module.exports = {
purge: ["./pages/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
colors: {
transparent: "transparent",
black: {
light: "#1D1D1F",
DEFAULT: "#000000",
},
white: "#fff",
},
extend: {
animation: {
// If you are using Toast component
left: "left 0.3s",
right: "right 0.3s",
// if you are using the animate variant of the modal
modal: "modal 0.3s",
// if you are using drawer variant right
"drawer-right": "drawer-right 0.3s",
// if you are using drawer variant left
"drawer-left": "drawer-left 0.3s",
// if you are using drawer variant top
"drawer-top": "drawer-top 0.3s",
// if you are using drawer variant bottom
"drawer-bottom": "drawer-bottom 0.3s",
},
keyframes: {
// if you are using drawer variant right
"drawer-right": {
"0%, 100%": { right: "-500px" },
"100%": { right: "0" },
},
// if you are using drawer variant left
"drawer-left": {
"0%, 100%": { left: "-500px" },
"100%": { left: "0" },
},
// if you are using drawer variant top
"drawer-top": {
"0%, 100%": { top: "-500px" },
"100%": { top: "0" },
},
// if you are using drawer variant bottom
"drawer-bottom": {
"0%, 100%": { bottom: "-500px" },
"100%": { bottom: "0" },
},
// if you are using the animate variant of the modal
modal: {
"0%, 100%": { top: "-500px" },
"100%": { top: "0" },
},
/* If you are using Toast component*/
left: {
"0%, 100%": { transform: "translateX(-100%)" },
"100%": { transform: "translateX(0)" },
},
right: {
"0%, 100%": { transform: "translateX(100%)" },
"100%": { transform: "translateX(0)" },
},
},
},
variants: {
/* If you are using Collapse or Accordion component*/
transitionProperty: {
height: "height",
},
},
},
variants: {
extend: {
backgroundColor: ["active", "checked"],
inset: ["checked"],
opacity: ["disabled"],
textColor: ["active"],
},
},
plugins: [],
};
I am trying to work with Tailwind CSS, where currently now I am trying to animate a background image. I tried different methods but have not yet figured out how to animate the background image in single direction from left to right.
Here is what I have done so far.
Added a custom background image
Added a repeat so that it fills the area.
What additionally I want to do, is show it like an animation, so it feels like it's moving. I had already implemented it in normal CSS but can't put it in Tailwind.
Following is the video for the animation that has been achieved in normal CSS: https://youtu.be/Jx8fg2MdG3Y
Following is the Tailwind playground for the background I have implemented so far: https://play.tailwindcss.com/jmoPHTdXAe
Current implemented code in Tailwind.
<div class="p-6 bg-gray-500 flex flex-col items-center min-h-screen justify-center bg-hero-pattern bg-repeat animate-ltr-linear-infinite">
<div class="text-white">
<h1 class="text-6xl">Some Text HERE</h1>
<h1 class="text-2xl">Background Not Animating</h1>
</div>
</div>
The following is the configuration I have tried so far in Tailwind.
theme: {
extend:{
backgroundImage: theme => ({
'hero-pattern': "url('img/bg.png')"
}),
animation:{
'ltr-linear-infinite': 'normal 100s linear infinite'
}
}
}
Following is the image I am using for repeat:
https://i.ibb.co/Qn5BR8N/bg.png
The problem
I couldn't see animation in your code. I see just the "timing-function".
Writing this:
animation: {
'ltr-linear-infinite': 'normal 100s linear infinite'
}
You tell Tailwind what he should define animation class like this:
.ltr-linear-infinite {
animation: normal 100s linear infinite;
}
It of course wouldn't work properly — there is no #keyframes normal.
The solution
Citation from docs:
To add new animation #keyframes, use the keyframes section of your theme configuration:
// tailwind.config.js
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0%, 100%': { transform: 'rotate(-3deg)' },
'50%': { transform: 'rotate(3deg)' },
}
}
}
}
}
So, in your case it would be like this:
module.exports = {
theme: {
extend: {
// Define pattern
backgroundImage: theme => ({
'hero-pattern': "url('img/bg.png')"
}),
// Define animation class
animation: {
'ltr-linear-infinite': 'move-bg 10s linear infinite',
},
// Define keyframes
keyframes: {
'move-bg': {
'0%': { 'background-position': '0 0' },
'100%': { 'background-position': '256px 0'}
}
}
}
}
}
P.S. 100s makes background to move ~2.5px/s. Perhaps it is too slow, so I changed it to ~25px/s.
I had to add keyframes in the configuration of tailwind as well. to make it work.
following is the Working EXAMPLE
This is the updated code for reference if anyone needs in future.
theme: {
extend: {
backgroundImage: (theme) => ({
'hero-pattern': "url('https://i.ibb.co/Qn5BR8N/bg.png')",
}),
animation: {
'ltr-linear-infinite': 'ltr-linear-infinite 100s linear infinite',
},
keyframes: {
'ltr-linear-infinite': {
'from': { 'background-position': '0 0' },
'to': { 'background-position': '400% 0%' },
},
},
}
}