当前位置：极客教程 > ReactJS > ReactJS 精品文章 > 可以将Chakra UI与Tailwind CSS混合使用吗

可以将Chakra UI与Tailwind CSS混合使用吗

可以将Chakra UI与Tailwind CSS混合使用吗

是的，可以将Chakra UI与Tailwind CSS混合使用。在本文中，我们将学习如何将Chakra UI与Tailwind CSS混合使用。Chakra UI是一个面向ReactJS的基于组件的开源前端框架。它是一个简单、易用且模块化的组件库，由Segun Adebayo创建。Chakra UI被数百万用户使用，可以轻松配置和扩展。Tailwind CSS是一种基于内联CSS的库，用于构建现代网站，无需为样式创建单独的文件。因此，我们将两者一起用于网页设计。

将Chakra UI与Tailwind CSS混合使用可以将Chakra UI的组件库和主题功能与Tailwind CSS的实用主义方法和响应式设计特性相结合，以创建外观美观、功能强大的用户界面，兼具两个框架的优势。我们使用了两种常见的方法来混合使用Chakra UI和Tailwind CSS。

  • 创建Chakra UI卡片组件
  • 创建Chakra UI表单控件组件

创建Chakra UI卡片组件

我们创建了一个卡片组件，其中包含标题、正文、按钮和表单控件组件。然后我们使用Tailwind CSS对组件进行样式设置。

前提条件

  • NodeJS
  • ReactJS
  • Tailwind CSS

在Windows中安装Chakra UI和Tailwind CSS

步骤1： 使用以下命令创建一个React应用：

npx create-react-app folder_name

步骤2： 在创建好你的项目文件夹（即folder_name）之后，使用以下命令进入该文件夹：

cd folder_name

步骤3： 创建ReactJS应用后，通过执行以下命令安装Chakra UI。

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

步骤4： 在index.js文件中添加标签，并将App组件包裹在其中。

// index.js 
import React from "react"; 
import ReactDOM from "react-dom/client"; 
import "./index.css"; 
import App from "./App"; 
import reportWebVitals from "./reportWebVitals"; 
import { ChakraProvider } from "@chakra-ui/react"; 
  
const root = ReactDOM.createRoot( 
    document.getElementById("root")); 
  
root.render( 
    <React.StrictMode> 
        <ChakraProvider> 
            <App /> 
        </ChakraProvider> 
    </React.StrictMode> 
); 
  
reportWebVitals();

步骤5： 通过输入以下命令安装TailwindCSS。

npm install -D tailwindcss
npx tailwindcss init

步骤6： 在 tailwind.config.js 中添加模板文件的路径

module.exports = {
    content: ["./src/**/*.{html,js,jsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

步骤7： 将Tailwind指令添加到您的index.css文件中

@tailwind base;
@tailwind components;
@tailwind utilities;

步骤8： 编译您的 index.css 文件以扫描模板

npx tailwindcss -i ./src/index.css -o ./public/output.css

步骤9： 将编译好的CSS文件添加到 <head> 并开始使用Tailwind的实用类来为内容添加样式。

<link href="/public/output.css" rel="stylesheet">

现在TailwindCSS和ChakraUI已经安装并准备在项目中使用

项目结构

可以将Chakra UI与Tailwind CSS混合使用吗

示例： 使用Tailwind CSS实现Chakra UI卡片组件，以改变卡片的主题并使用各种CSS转换和更改卡片主题。

创建一个CardExample.jsx文件，并通过导入Box、Card、CardHeading、CardFooter和CardBody创建一个基本的卡片布局。

  • Box： 创建响应式布局的容器。
  • Card： 子元素的父包装器。
  • CardHeader： 卡片的头部。
  • CardFooter： 卡片的底部。
  • CardBody： 卡片的主体。
  • Heading： 渲染标题。
  • Text： 渲染文本。
  • Button： 渲染按钮。

为了实现卡片的主题更改，我们使用useState React Hook来存储其值，然后使用条件运算符根据hook的值来改变卡片和文本的颜色。

为了在卡片上实现CSS转换，创建两个useState Hook，一个用于转换文本，另一个用于选择转换，然后使用switch case将转换存储在文本中，并使用useEffect Hook在选择新转换时渲染更改。

在App.jsx中导入CardExample。

// CardExample.jsx 
import { 
    Box, 
    Button, 
    Card, 
    CardBody, 
    CardFooter, 
    CardHeader, 
    Heading, 
    Text, 
} from "@chakra-ui/react"; 
import React, { useEffect, useState } from "react"; 
  
const CardExample = () => { 
    const [transformCount, setTransformCount] = useState(1); 
    const [transformText, setTransformText] = useState(""); 
  
    useEffect(() => { 
        changeTransfrom(); 
    }, [transformCount]); 
  
    const changeTransfrom = () => { 
        if (transformCount > 4) { 
            setTransformCount(1); 
        } 
        switch (transformCount) { 
            case 1: 
                setTransformText("hover:rotate-6"); 
                break; 
  
            case 2: 
                setTransformText("hover:scale-105"); 
                break; 
  
            case 3: 
                setTransformText("hover:skew-x-12"); 
                break; 
  
            case 4: 
                setTransformText("hover:skew-y-12"); 
                break; 
  
            default: 
                setTransformText("hover:translate-x-12"); 
        } 
    }; 
    const [darkTheme, setDarkTheme] = useState(true); 
    console.log(transformText); 
    return ( 
        <Box 
            rounded={"xl"} 
            className={`p-auto shadow-xl ${transformText}      
            shadow-orange-600 bottom-20 duration-300 ease-in-out`} 
        > 
            <Card 
                rounded={"xl"} 
                align="center"
                bg={darkTheme ? "black" : "white"} 
                className={`box `} 
            > 
                <CardHeader> 
                    <Heading 
                        size="xl"
                        className={darkTheme ? 
                            ` text-cyan-300 ` : `text-cyan-600`} 
                    > 
                        GFG Tailwind Chakra Combination 
                    </Heading> 
                </CardHeader> 
                <CardBody> 
                    <Text 
                        className={darkTheme ? 
                            ` text-cyan-300 p-2` : `text-cyan-600 p-2`} 
                    > 
                        You can use both chakraui and tailwind to 
                        gather for styling the webpages. 
                    </Text> 
                    <Text 
                        className={darkTheme ? 
                            ` text-cyan-300 p-2` : `text-cyan-600 p-2`} 
                    > 
                        This card is made using both the ChakraUI and 
                        Tailwind CSS 
                    </Text> 
                </CardBody> 
                <CardFooter> 
                    <Button 
                        color={darkTheme ? "cyan.300" : "blue"} 
                        colorScheme={darkTheme ? "green" : "teal"} 
                        onClick={() => { 
                            setDarkTheme(!darkTheme); 
                        }} 
                    > 
                        {darkTheme ? "light" : "dark"} 
                    </Button> 
                    <Button 
                        color={darkTheme ? "cyan.300" : "blue"} 
                        colorScheme={darkTheme ? "green" : "teal"} 
                        onClick={() => { 
                            setTransformCount(transformCount + 1); 
                        }} 
                    > 
                        {transformCount} 
                    </Button> 
                </CardFooter> 
            </Card> 
        </Box> 
    ); 
}; 
  
export default CardExample;

// App.jsx 
import CardExample from "./CardExample"; 
  
function App() { 
    return ( 
        <div className="bg-black shadow-xl  
            text-white relative flex  
            flex-row justify-center  
            items-center h-screen w-full"> 
            <CardExample /> 
        </div> 
    ); 
} 
  
export default App;

在终端中输入以下命令来运行项目。

npm start

注意： 然后转到 http://localhost:3000

输出：

可以将Chakra UI与Tailwind CSS混合使用吗

创建Chakra UI表单控件组件

使用Tailwind CSS实现Chakra UI表单控件组件和Toast，以在Toast中显示文本。通过导入Flex、FormControl、FormLabel、Input和useToast来创建FormExample.jsx并创建表单布局。

  • Flex： 类似于Box，但显示为flex。
  • FormControl： 为其子元素提供功能和上下文。
  • FormLabel： 类似于HTML标签，用于表单标签。
  • Input： 用户输入的输入组件。
  • useToast： 创建一个toast组件。

为了实现这个，我们使用useState React钩子来存储输入值，然后在toast组件中使用它们来显示toast中的值。

示例： 在这里，我们使用上述解释的方法。

在App.jsx中导入FormExample.jsx

//FormExample.jsx 
import { 
    Box, 
    Button, 
    Flex, 
    FormControl, 
    FormLabel, 
    Input, 
    Text, 
    useToast, 
} from "@chakra-ui/react"; 
import React from "react"; 
import { useState } from "react"; 
  
const FormExample = () => { 
    const toast = useToast(); 
    const [email, setEmail] = useState(""); 
    const [name, setName] = useState(""); 
    const [subject, setSubject] = useState(""); 
    return ( 
        <Box className="col-span-3 w-full h-auto  
                        shadow-gray-400 border  
                        shadow-xl  
                        rounded-xl lg:p-4"> 
            <Box className="p-4"> 
                <Text className="text-center text-3xl  
                                 text-semibold  
                                 text-blue-700"> 
                    GFG Form Using ChakraUI and Tailwind 
                </Text> 
  
                <Box className="grid md:grid-cols-2 
                                gap-4 w-full py-6"> 
                    <Flex className="flex-col py-2"> 
                        <FormControl> 
                            <FormLabel> 
                                Email address 
                            </FormLabel> 
                            <Input 
                                type="email"
                                onChange={(e) => { 
                                    setEmail(e.target.value); 
                                }} 
                            /> 
                        </FormControl> 
                    </Flex> 
                    <Flex flexDirection={"column"} 
                        className="py-2"> 
                        <FormControl> 
                            <FormLabel> 
                                Your Name 
                            </FormLabel> 
                            <Input 
                                type="text"
                                onChange={(e) => { 
                                    setName(e.target.value); 
                                }} 
                            /> 
                        </FormControl> 
                    </Flex> 
                </Box> 
                <Flex flexDirection={"column"} 
                    className="py-2"> 
                    <FormControl w="full"> 
                        <FormLabel> 
                            Subject 
                        </FormLabel> 
                        <Input 
                            type="text"
                            onChange={(e) => { 
                                setSubject(e.target.value); 
                            }} 
                        /> 
                    </FormControl> 
                </Flex> 
                <Button 
                    loadingText="Submitting"
                    color="teal"
                    bg="darkred"
                    variant="solid"
                    className="p-2 w-full"
                    onClick={() => 
                        toast({ 
                            title: "GFG says", 
                            description: `{email}{name} ${subject}`, 
                            status: "success", 
                            position: "top", 
                            duration: 9000, 
                            isClosable: true, 
                        }) 
                    } 
                > 
                    Submit 
                </Button> 
            </Box> 
        </Box> 
    ); 
}; 
  
export default FormExample;

// App.jsx 
import "./App.css"; 
import FormExample from "./FormExample"; 
function App() { 
  return ( 
    <div className="bg-black shadow-xl  
        text-white relative flex  
        flex-row justify-center  
        items-center h-screen w-full"> 
      <FormExample /> 
    </div> 
  ); 
} 
  
export default App;

在终端中输入以下命令来运行项目。

 npm start

注意： 然后转到 http://localhost:3000

输出：

可以将Chakra UI与Tailwind CSS混合使用吗

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程