We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
2.3.6
in my case, am useing nextUI with VIte5.x (not nextjs), such as below this setting, it can right working,
but when I change the them stlye in html inline, it not work, such as this border-b-5
my main.tsx:
ReactDOM.createRoot(document.getElementById('root')!).render( <NextUIProvider> <ThemeProvider attribute='class' defaultTheme='purple-dark' themes={['light', 'dark', 'purple-dark']}> <App /> </ThemeProvider> </NextUIProvider> )
tailwind.config.js
import { Container } from 'postcss' const { nextui } = require('@nextui-org/react') /** @type {import('tailwindcss').Config} */ export default { content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}'], theme: { extend: {} }, darkMode: 'class', plugins: [ nextui({ prefix: 'nextui', addCommonColors: false, // override common colors (e.g. "blue", "green", "pink"). defaultTheme: 'light', // default theme from the themes object defaultExtendTheme: 'light', layout: { dividerWeight: '1px', // h-divider the default height applied to the divider component disabledOpacity: 0.5, // this value is applied as opacity-[value] when the component is disabled fontSize: { tiny: '0.75rem', // text-tiny small: '0.875rem', // text-small medium: '1rem', // text-medium large: '1.25rem' // text-large }, lineHeight: { tiny: '1rem', // text-tiny small: '1.25rem', // text-small medium: '1.5rem', // text-medium large: '1.75rem' // text-large }, radius: { small: '4px', // rounded-small medium: '6px', // rounded-medium large: '8px' // rounded-large }, borderWidth: { small: '1px', // border-small medium: '2px', // border-medium (default) large: '3px' // border-large } }, themes: { light: { layout: { disabledOpacity: '0.3', hoverOpacity: 0.8, // this value is applied as opacity-[value] when the component is hovered boxShadow: { // shadow-small small: '0px 0px 5px 0px rgb(0 0 0 / 0.02), 0px 2px 10px 0px rgb(0 0 0 / 0.06), 0px 0px 1px 0px rgb(0 0 0 / 0.3)', // shadow-medium medium: '0px 0px 15px 0px rgb(0 0 0 / 0.03), 0px 2px 30px 0px rgb(0 0 0 / 0.08), 0px 0px 1px 0px rgb(0 0 0 / 0.3)', // shadow-large large: '0px 0px 30px 0px rgb(0 0 0 / 0.04), 0px 30px 60px 0px rgb(0 0 0 / 0.12), 0px 0px 1px 0px rgb(0 0 0 / 0.3)' } }, colors: { primary: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', DEFAULT: '#4757d5', foreground: '#ffffff' } } }, dark: { layout: { hoverOpacity: 0.9, // this value is applied as opacity-[value] when the component is hovered boxShadow: { // shadow-small small: '0px 0px 5px 0px rgb(0 0 0 / 0.05), 0px 2px 10px 0px rgb(0 0 0 / 0.2), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)', // shadow-medium medium: '0px 0px 15px 0px rgb(0 0 0 / 0.06), 0px 2px 30px 0px rgb(0 0 0 / 0.22), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)', // shadow-large large: '0px 0px 30px 0px rgb(0 0 0 / 0.07), 0px 30px 60px 0px rgb(0 0 0 / 0.26), inset 0px 0px 1px 0px rgb(255 255 255 / 0.15)' } }, colors: { focus: '#F182F6', primary: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', // DEFAULT: '#4f46e5', DEFAULT: '#4757d5', foreground: '#ffffff' }, purplePrimary: { 50: '#FEECFE', 100: '#FDD5F9', 200: '#FCADF9', 300: '#F182F6', 400: '#DD62ED', 500: '#c031e2', 600: '#9823C2', 700: '#7318A2', 800: '#520F83', 900: '#3B096C', DEFAULT: '#DD62ED', foreground: '#ffffff' } } }, 'purple-dark': { extend: 'dark', // <- inherit default values from dark theme colors: { background: '#0D001A', // them bg-color foreground: '#ffffff', focus: '#F182F6', primary: { 50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc', 400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca', 800: '#3730a3', 900: '#312e81', // DEFAULT: '#4f46e5', DEFAULT: '#4757d5', foreground: '#ffffff' }, purplePrimary: { 50: '#FEECFE', 100: '#FDD5F9', 200: '#FCADF9', 300: '#F182F6', 400: '#DD62ED', 500: '#c031e2', 600: '#9823C2', 700: '#7318A2', 800: '#520F83', 900: '#3B096C', DEFAULT: '#DD62ED', foreground: '#ffffff' } }, layout: { disabledOpacity: '0.3', hoverOpacity: 0.8, radius: { small: '4px', medium: '6px', large: '8px' }, borderWidth: { small: '1px', medium: '2px', large: '3px' } } } } }) ] }
{ "name": "react18-blog-nextui-front", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview" }, "dependencies": { "@nextui-org/react": "^2.3.6", "@types/estree": "^1.0.5", "@types/node": "^20.12.2", "axios": "^1.6.8", "dayjs": "^1.11.10", "framer-motion": "^11.2.2", "next-themes": "^0.3.0", "oh-router": "^0.4.0", "oh-router-react": "^0.0.11", "react": "^18.2.0", "react-dom": "^18.2.0", "zustand": "^4.5.2" }, "devDependencies": { "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@typescript-eslint/eslint-plugin": "^7.2.0", "@typescript-eslint/parser": "^7.2.0", "@vitejs/plugin-react-swc": "^3.5.0", "autoprefixer": "^10.4.19", "consola": "^3.2.3", "eslint": "^8.57.0", "eslint-config-standard-with-typescript": "^43.0.1", "eslint-plugin-import": "^2.25.2", "eslint-plugin-n": "^15.0.0 || ^16.0.0 ", "eslint-plugin-prettier": "^5.1.3", "eslint-plugin-promise": "^6.0.0", "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "eslint-plugin-react-refresh": "^0.4.6", "postcss": "^8.4.38", "sass": "^1.72.0", "tailwindcss": "^3.4.3", "typescript": "^5.2.2", "vite": "^5.2.0", "vite-plugin-checker": "^0.6.4", "vite-plugin-imp": "^2.4.0", "vite-plugin-svg-icons": "^2.0.1", "vite-plugin-svgr": "^4.2.0" } }
https://github.com/Lil-Kr/blog-system-single/blob/oh-router-change-base/react18-blog-nextui-front/src/pages/testnavbar/NavBarTest.tsx
set when dark them will be change this style
but not working in html line
I expected the border color will be change to border-purple-800 in dark****
my git repo: https://github.com/Lil-Kr/blog-system-single/tree/oh-router-change-base/react18-blog-nextui-front
windows_11
Chrome
The text was updated successfully, but these errors were encountered:
ENG-849 [BUG] - change them in html inline is not working for vite5 + react18 + nextUI_2.3.6
Sorry, something went wrong.
No branches or pull requests
NextUI Version
2.3.6
Describe the bug
in my case, am useing nextUI with VIte5.x (not nextjs), such as below this setting, it can right working,
but when I change the them stlye in html inline, it not work, such as this border-b-5
my main.tsx:
tailwind.config.js
Your Example Website or App
https://github.com/Lil-Kr/blog-system-single/blob/oh-router-change-base/react18-blog-nextui-front/src/pages/testnavbar/NavBarTest.tsx
Steps to Reproduce the Bug or Issue
set when dark them will be change this style
but not working in html line
Expected behavior
I expected the border color will be change to border-purple-800 in dark****
Screenshots or Videos
my git repo:
https://github.com/Lil-Kr/blog-system-single/tree/oh-router-change-base/react18-blog-nextui-front
Operating System Version
windows_11
Browser
Chrome
The text was updated successfully, but these errors were encountered: