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: [],
};
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
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))" },
},
I'm trying to give a background colour to my ApexCharts polarArea chart (I want the areas marked by red dots in the image to be grey/white):
I can't find a way to do this. I've tried adding fill to the various options, but nothing. I thought it might be possible with polygons like the radar chart, but no.
The closest I have come is by adding a CSS class to the chart on the containing Vue component:
<Chart class="chart" :myValues='this.myValues' :key="componentKey" />
.chart {
width: 320px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
margin: auto;
padding-top: 3px;
padding-right: 4px;
}
But annoyingly it's not centred on the chart origin and even with pixel precise increments to padding it's not quite right! Also, if possible I'd like alternating colours for each of the rings, like is possible with the radar chart.
My full chart Vue component:
<template>
<div class="polarChart">
<apexcharts height="360" type="polarArea" :options="chartOptions" :series="series"></apexcharts>
</div>
</template>
<style scoped>
.polarChart {
align-items: center;
}
</style>
<script>
import VueApexCharts from 'vue-apexcharts'
export default {
name: 'Chart',
components: {
apexcharts: VueApexCharts,
},
props: ['myValues'],
data: function() {
return {
series: this.myValues,
plotOptions: {
polarArea: {
dataLabels: {
offset: 30
},
}
},
chartOptions: {
labels: ['A', 'B', 'C', 'D', 'E', 'F'],
colors:['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
legend: {
show: false
},
yaxis: {
max: 100,
show: false
},
xaxis: {
categories: ['A.', 'B.', 'C.', 'D.', 'E.', 'F.']
},
dataLabels: {
enabled: true,
formatter: function (val, opts) {
return Math.round(opts.w.globals.series[opts.seriesIndex]) + "% " + opts.w.globals.labels[opts.seriesIndex]
},
background: {
enabled: true,
borderRadius:2,
},
style: {
colors: ['#403d39', '#ffbe0b', '#00b4d8', '#e73265', '#90be6d', '#ada7c9'],
}
},
tooltip: {
// enabled: false
},
chart: {
type: 'polarArea',
},
stroke: {
colors: ['#fff']
},
fill: {
opacity: 1
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: '100%'
},
legend: {
position: 'bottom'
}
}
}]
},
}
},
methods: {
addData(){
this.updateChart();
},
updateChart() {
this.series = [{
data: this.freshnessValues
}]
}
},
}
</script>
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 }
},
Any idea why the icons are not shown in this tree?
this is the HTML:
<div kendo-tree-view="tree" k-data-source="treeData" k-options="treeOptions"></div>
this is the CSS:
#tree .k-sprite {
background-image: url("http://demos.telerik.com/kendo-ui/content/web/treeview/coloricons-sprite.png");
}
.rootfolder { background-position: 0 0; }
.folder { background-position: 0 -16px; }
and this is the javascript;
$scope.treeData = new kendo.data.HierarchicalDataSource({
data: [
{ text: "Furniture", icon: "folder", items: [
{ text: "Tables & Chairs", icon: "folder" },
{ text: "Occasional Furniture", icon: "folder" }
] },
{ text: "Decor", icon: "folder", items: [
{ text: "Bed Linen", icon: "folder" },
{ text: "Carpets", icon: "folder" }
] }
]
});
$scope.treeOptions = {
dataSpriteCssClassField: "icon"
};
There's nothing with the ID of tree in your DOM.
Try switching #tree to .k-treeview and the icons will show:
Plunker illustrating this here