I'm trying to add a custom color:
extend: {
colors: {
'body-color': '#525B73'
}
}
This breaks compilation with an error about built-in Tailwind classes not existing:
The bg-white class does not exist.
Also tried color: { bodyColor: '#525B73' }, to no avail. This error vanishes if I remove my custom color. What's going on?
Below is a simplified version of my config file:
module.exports = {
purge: [
'./components/**/*.vue',
'./layouts/**/*.vue',
'./pages/**/*.vue',
'./plugins/**/*.js'
],
theme: {
fontFamily: {
'intro-black': ['intro-black', 'sans-serif']
},
container: {
maxWidth: {
lg: 'none'
},
},
extend: {
colors: {
'body-color': '#525B73'
},
fontSize: {
'30': '30px'
},
lineHeight: {
'40': '40px'
},
height: {
'60': '60px'
},
margin: {
'100': '100px'
},
padding: {
'40': '40px'
},
borderWidth: {
'6': '6px'
},
zIndex: {
'20000': '20000'
},
boxShadow: {
'25': '0 0 20px rgba(0, 0, 0, 0.25)'
},
borderRadius: {
'8': '8px'
}
}
}
}
EDIT: as per #BoussadjraBrahim's comment I updated to Tailwind 2.x which replaces the main compilation problem with a minor "'body-color' class does not exist" problem.
When you add a custom color it will applied to any colorable property like background, text, border and gradient ..., so if you define a color named body-color it will be available as :
bg-body-color : for background color
text-body-color : for text color
border-body-color : for border color
and so on
I recommend to give an appropriate name like primary or blue-gray instead of body-color
Related
Fairly straightforward, but I have a single bar on a barchart that I want to show by itself. I've hidden the axes and their ticks, but there is still all of that space there on the left and top//bottom of chart from the axes and the legend I am presuming.
Is there a way to remove this space without just putting negative margins on the element?
I've tried working with negative padding, but that doesn't work on the top and bottom of the chart.
I made a quick CodeSandbox to show my actual component
Any tips would be greatly appreciated!
Cheers!
Horizontal Stacked Bar Chart
<template>
<div style="width: 100%; height: 100%">
<canvas :id="id" width="100%" height="100%"></canvas>
</div>
</template>
<script>
import { defineComponent, onMounted } from "vue"
import Chart from "chart.js/auto"
import ChartDataLabels from "chartjs-plugin-datalabels"
export default defineComponent({
props: {
kind: {
/**
* #example: 'single', 'stacked'
*/
type: String,
default: "stacked",
},
color: {
type: String,
default: "rgba(255, 99, 132, 1)",
},
labels: {
type: Array,
default: () => ["S1", "S2", "S4", "S6"],
},
datasets: {
type: Array,
default: () => [
{
label: "va_value",
data: [80, 10, 60, 50],
backgroundColor: "#11DCB5",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
// This is here to show SOMETHING even if the value is 0
},
{
label: "nva_value",
data: [20, 0, 40, 0],
backgroundColor: "#CA2F4B",
borderColor: "transparent",
barThickness: 20,
minBarLength: 4,
},
],
},
},
setup(props, context) {
const id = Math.random().toString()
onMounted(() => {
Chart.register(ChartDataLabels)
const ctx = document.getElementById(id)
const myChart = new Chart(ctx, {
type: "bar",
data: {
labels: props.labels,
datasets: props.datasets,
},
options: {
layout: {
padding: {
left: -20,
bottom: -20,
top: -20
}
},
plugins: {
legend: {
display: false,
},
datalabels: {
formatter: function (value) {
return props.kind === "stacked" ? `${value}s` : `${value}%`
},
color: "#fff",
anchor: "center",
align: "center",font: {
weight: "bold",
},
},
},
responsive: true,
maintainAspectRatio: false,
indexAxis: "y",
scales: {
y: {
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
},
x: {
display: props.kind === "stacked" ? true : false,
beginAtZero: true,
stacked: true,
ticks: {
color: "#fff",
},
grid: {
drawBorder: false,
display: false,
},
title: {
display: true,
text: props.kind === "stacked" ? "Step Time (s)" : "",
color: "#fff",
},
},
},
},
})
myChart
})
return { id }
},
})
</script>
<style lang=""></style>
This is because you set barThickness to 20 in your datasets. If you remove this it will show as you want:
https://codesandbox.io/s/modest-wave-60xui0
I have upgraded to Tailwind 3 and am using Laravel 8. My tailwindconfig.js is below. When I try to use one of the newer colors (e.g., slate), it is black. I compiled with Laravel Mix, which has not reported any errors.
const defaultTheme = require("tailwindcss/defaultTheme");
const colors = require("tailwindcss/colors");
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
],
theme: {
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
colors: {
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet,
},
},
},
plugins: [
require("#tailwindcss/forms"),
require("#tailwindcss/aspect-ratio"),
require("#tailwindcss/typography"),
],
};
Are you run npm run dev to push the new generated assets to the public folder?
You've placed the colors at the wrong position in your code:
theme: {
colors: {
transparent: 'transparent',
current: 'currentColor',
green: colors.emerald,
yellow: colors.amber,
purple: colors.violet,
},
extend: {
fontFamily: {
sans: ["Nunito", ...defaultTheme.fontFamily.sans],
},
},
},
I use NativeBase Input Component and Costume Theme, I tried to change the font size of the input component in my costume theme I already tried to change it in the following examples, but it doesn't change.
How can I change the font size of the input component in my costume theme?
Example 1:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white", fontSize: "20" },
},
},
},
});
Example 2:
const themeOne = extendTheme({
components: {
Input: {
baseStyle: {
style: { color: "white"},
fontSize: "20",
},
},
},
});
You can use defaultProps. Read more about customizing Input component.
const theme = extendTheme({
components: {
Input: {
baseStyle: {
color: 'red.400',
},
defaultProps: { size: '2xl' },
},
},
});
I can generate the diagram in Chrome, Firefox, Safari and Microsoft Edge but not in IE11. When I look at the console, it tells me that there are two issues:
1.) 'init' is undefined
2.) Syntax error
In the initialization I do the following:
<script src="https://unpkg.com/gojs/release/go.js"></script>
<script src="/js/GenerateMap.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
init();
});
</script>
Inside GenerateMap.js I have the following:
function init() {
var newString = document.getElementById("valueFromServer").value;
var GO = go.GraphObject.make;
....}
And for the Syntax error it tells me that it's at line 13. The line containing ").":
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
),
new go.Binding("location", "loc", go.Point.parse)
));
Why would these issues only be with IE11?
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name"),
The issue is related to the above code, at the end of the Binding method, there have an extra ',' symbol, try to remove it.
The following code should be works well, try to use it.
myDiagram.nodeTemplateMap.add("",
GO(go.Node, "Auto",
// the entire node will have a light-blue background
{ resizable: false, width: 130, height: 80, background: "transparent" },
{ click: function (e, node) { var data = node.data; clicknode(data.key);} },
GO(go.Shape, "RoundedRectangle", { fill: "white" },
new go.Binding("fill", "isSelected", function (sel) {
if (sel) return "lightgoldenrodyellow"; else return "white";
}).ofObject("").makeTwoWay()),
GO(go.TextBlock, "Default Text",
{ stroke: "grey", font: "11px sans-serif", maxLines: 4, overflow: go.TextBlock.OverflowEllipsis },
new go.Binding("text", "name")
),
new go.Binding("location", "loc", go.Point.parse)
));
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:'MAin Panel',
renderTo:Ext.getBody(),
height:600,
width:600,
bodyStyle: {
background: 'yellow',
position:'absolute ',
'z-index': -1
},
items:[
{
xtype: Ext.create('Ext.window.Window',{
height : 500,
width : 500,
id:'abc',
items : [
{
xtype : 'button',
text : 'Open',
handler : function(){
/* w2.showAt(450,300);
w1.disable(); */
}
},
{
xtype:'panel',
title:'Inner Panel',
height:200,
width:200,
style:{
position:'absolute ',
'z-index': 2
}
}
],
bodyStyle:{
background: '#000000',
opacity: 0.7,
},
style:{
position:'absolute',
'z-index': 1
}
})
}
]
});
Ext.getCmp('abc').show();
w1.setTitle('Window 1');
w1.show();
});
I have the above code, and I want that "Inner Panel" should come over window "abc", and the opacity attribute should not apply on "Inner Panel". Child components of window "abc" is also getting the opcaity. I have tried the style:{ position:'absolute', 'z-index': 1}, same code is working html,but not in extjs.
I suggest you to use ZIndexManager.
First, register all of your containers and then use bringToFront method to show the container you want.