https://github.com/relliv/css-variable-and-tailwind-color-theme-change-example
Created with StackBlitz ⚡️
https://github.com/relliv/css-variable-and-tailwind-color-theme-change-example
Last synced: 2 months ago
JSON representation
Created with StackBlitz ⚡️
- Host: GitHub
- URL: https://github.com/relliv/css-variable-and-tailwind-color-theme-change-example
- Owner: relliv
- Created: 2024-11-19T06:02:59.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-11-19T06:35:15.000Z (6 months ago)
- Last Synced: 2025-02-02T08:29:40.730Z (4 months ago)
- Language: Vue
- Homepage: https://stackblitz.com/~/github.com/relliv/css-variable-and-tailwind-color-theme-change-example
- Size: 27.3 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tailwind Dynamic Color Palette Example
CSS Variables:
```css
:root {
--nx-theme-50: #fffce7;
--nx-theme-100: #fffac1;
--nx-theme-200: #fff086;
--nx-theme-300: #ffe041;
--nx-theme-400: #ffcb0d;
--nx-theme-500: #f0b000;
--nx-theme-600: #d18700;
--nx-theme-700: #a65f02;
--nx-theme-800: #894a0a;
--nx-theme-900: #743d0f;
--nx-theme-950: #441f04;
}
```
And TailwindCSS config:
```js
export default {
content: ['./index.html', './src/**/*.{vue,ts}'],
theme: {
extend: {
colors: {
'nx-theme': {
50: 'var(--nx-theme-50)',
100: 'var(--nx-theme-100)',
200: 'var(--nx-theme-200)',
300: 'var(--nx-theme-300)',
400: 'var(--nx-theme-400)',
500: 'var(--nx-theme-500)',
600: 'var(--nx-theme-600)',
700: 'var(--nx-theme-700)',
800: 'var(--nx-theme-800)',
900: 'var(--nx-theme-900)',
950: 'var(--nx-theme-950)',
},
},
},
},
plugins: [],
};
```
That's all.
> But there is a problem with this method. Tailwind can't track CSS variables and with this method we can't use opacity property over colors like `bg-nx-theme-100/70`.