liquid glass ui components, demonstrating a liquid glass effect using Tailwind CSS and React.
npm install liquid-glass-tailwind-reactTo install the package, run the following command:
```
npm install liquid-glass-tailwind-react
To use the LiquidGlass component in your Next.js application, import it as follows:
`tsx
import { Button } from 'liquid-glass-tailwind-react';
const HomePage = () => {
return (
export default HomePage;
`
The LiquidGlass component accepts the following props:
- className (string): Additional CSS classes to apply to the component.style
- (React.CSSProperties): Inline styles to apply to the component.
To run the development server, use the following command:
``
npm run dev
This will start the Next.js application in development mode.
To build the project for production, run:
``
npm run build
TypeError: Cannot read properties of null (reading 'useContext')
`
如果运行 npm ls react 发现有多个不同版本的 React(如 18.2.0 和 18.3.1),Next.js 构建时可能会失败。
解决方法:
请确保所有依赖都使用同一个 React 版本(推荐 18.2.0),并在 package.json 中统一声明和使用 resolutions 字段。$3
如果组件样式未生效,请确保在项目的全局样式文件(如
styles/globals.css)中正确引入 Tailwind 指令:`css
@tailwind base;
@tailwind components;
@tailwind utilities;
``This project is licensed under the MIT License. See the LICENSE file for more details.