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))" },
},
Related
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
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.
This is my current override which works fine, but when I pass an isLoading prop, the theme is far too light.
solid: {
bgGradient: "linear(to-r, primary.600, primary.500)",
color: "white",
_active: {},
_hover: {
transform: "scale(0.98)",
bgGradient: "linear(to-r, primary.500, primary.400)",
},
_focus: {},
},
Use the _loading key and set opacity to 1
solid: {
bgGradient: "linear(to-r, primary.600, primary.500)",
color: "white",
_active: {},
_hover: {
transform: "scale(0.98)",
bgGradient: "linear(to-r, primary.500, primary.400)",
},
_focus: {},
_loading: { opacity: 1 }
},
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 have this grid that has headers in vertical position (phone header), and when I try to resize the header's width to 50px I don't get to see the header text anymore (but if I manually drag the header to the left I can see the header text), so my question is: How can I always show the header text even after setting the header size to smaller size.
Please take a look at this line of code:
{ text: 'Phone' dataIndex: 'phone', cls: 'grid-header-phone' }
Now I'm simply adding a smaller width to it like this:
{ text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' }
Here's a working example: FIDDLE
here's the code I'm using:
Ext.application({
name : 'Fiddle',
launch : function() {
var store = Ext.create('Ext.data.Store', {
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', width: 50, dataIndex: 'phone', cls: 'grid-header-phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
and here's the css code:
.grid-header-phone .x-column-header-text {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
/* transform doesn't work on inline elements */
display: inline-block;
/* need to hard code a height for this to work */
/* you could use Ext.util.TextMetrics if you needed to dynamically determine the text size */
height: 40px;
}
.x-ie8 .grid-header-phone .x-column-header-text {
/* IE8 doesn't have css transform */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
use display:inline-flex instead of inline block.