Is it possible to make the color dynamic in tailwind config.
I want to received the desired color for (primary , accent) from backend via api.
So the user can change the color from the admin panel.
i want to get this hex value from api
Yes this is possible but instead of only primary, you need to return the complete string like bg-primary(as tailwind only recognises the string) where your primary color should be defined in tailwind.config.js file.
For an example you can refer to my answer for this question.
You can try fetching the CSS variables to change you color palette without changing tailwind.config.js
config file:
module.exports = {
theme: {
extend: {
colors: {
"primary": {
100:"var(--primary-color-100)",
200:"var(--primary-color-200)",
},
"accent": "var(--accent-color)"
},
},
},
};
css file:
:root {
--primary-color-100: #fff;
--primary-color-200: #fff00;
--accent-color: #000;
}
Related
Daisy UI has buttons: https://daisyui.com/components/button/
However, I'd like to override the colors for a specific button, without having to go through the effort of creating an entire theme.
I can just use bg-green-500 on a button, but that will just change the background color, when I also need to change all of the associated colors.
Is there a good way to do this?
AFAIK, to do this you override the current theme in the tailwind.config.js file.
Note that you import the theme's base:
/** #type {import('tailwindcss').Config} */
module.exports = {
content: ["./app/**/*.{ts,tsx,jsx,js}"],
daisyui: {
themes: [
{
light: {
...require("daisyui/src/colors/themes")["[data-theme=light]"],
primary: "#7cb3dd",
},
},
],
},
plugins: [require("#tailwindcss/typography"), require("daisyui")],
};
Here, we're overriding the primary color to #7cb3dd for the' light' theme.
Adjust as needed!
Here's more info:
https://daisyui.com/docs/themes/
In my case I just want to change the default default color, take as example the default home section:
We recommend building UIs with a [**component-driven**](https://componentdriven.org)
That leads to:
I'd like to change that blue to, say, red.
I saw that the a class has the following themes:
class="sbdocs sbdocs-a css-19nbuh3"
So, I created a .storybook/manager-head.html and inside I wrote:
<style>
.sbdocs-a {
color: red;
}
But I see no changes! What am I doing wrong?
You can do this two ways but all in .storybook/preview.js.
Altering the docs theme:
export const parameters = {
...
docs: {
theme: {
colorSecondary: 'red',
},
},
...
};
This have the side effect to cause other unwanted components to change their color, as this color is not used only for links.
Provide your own <a> component to docs [best solution]:
export const parameters = {
...
docs: {
components: {
a: ({children, ...args}) => <a style={{color: 'red'}} {...args}>{children}</a>
},
},
...
};
This is the best way i found to style docs components.
also token name used for a can be found in storybook sources
See theming docs page for a full theme example.
Tailwind provides good option to get value from config inside another config object
module.exports = {
theme: {
colors: {
primary: 'red'
},
extend: {
colors: theme => ({
secondary: theme('colors.primary') // will be red
})
}
}
}
But this doesn't work when I want to create classes using RGBA. I want to create something like
module.exports = {
theme: {
colors: {
primary: 'red'
},
extend: {
boxShadow: theme => ({
extra: "0 0 999px rgba(theme('colors.primary'), .25))"
}),
}
}
}
This will render 0 0 999px rgba(red, .25) which is not correct CSS value - you need to pass red as 255, 0, 0. But I want to use colors.primary as it was defined in my config
I know Tailwind has it's own build utils for converting colors like asRgba, withAlphaVariable. For example, when you use text-white Tailwind renders it as color: rgba(255,255,255,var(--tw-text-opacity));. But how can I use it?
So basically how can I achieve this - pass color key from my config into another property and get rendered it as RGB/RGBA?
Update: I want third square (TW) to work as others
DEMO
I think your idea was wrong, because tailwind colors is defined with HEX number, but you trying to use it into RGBA type, so I think you need to convert firstly if you want to make your way.
Anyway let us know your success :)
check this doc
I'm able to get up to 24rem on max-height using tailwindcss, but not 26rem. How would I add this value? I was not able to find information on how to do this in the docs: https://tailwindcss.com/docs/max-height . The only value-related changes I can find are for adding scale. Thank you!
You could add it manually on tailwind.config.js and recompile it
theme: {
extend: {
height: {
100: '24rem',
},
},
},
therefore, you can use class max-h-100 on your class list.
You have two options:
You can add the values directly inside your class names like so: follow the link
<div class="h-[250px] w-[30rem] absolute top-[1rem] ..."></div>
the second approach is by using config file which locates in your project root directory: <<tailwind.config.js>>: follow the link
module.exports = {
theme: {
extend: {
height: {
'128': '32rem',
}
}
}
}
I have defined custom colors in Nuxt+Vuetify:
vuetify: {
theme: {
options: {customProperties: true},
themes: {
light: {
primary: {
lighten1: '#AFB5D1' //inactive icons
}
}
}
}
}
Also added file elements.scss in nuxt config css: ~assets/style/elements.scss
where I want to use color primary-lighten.
.separator {
color: var(--v-primary-lighten1);
}
I expect to see color #AFB5D1 on my page for element marked with class separator. In chrome inspector class looks correct but color has not parsed and color is not applied.
What I' am doing wrong?