使用React和Tailwind响应式列布局

列布局在网页中主要用于在大屏幕上并排显示内容。这有助于在小屏幕上显示大量信息。在小屏幕上无法并排查看信息，因此我们尝试以行格式显示。为了实现这一点，我们使用响应式设计概念。

让我们看看最终布局会是什么样子：

什么是Web开发中的响应式设计

响应式设计是一种将内容以整齐和最优化的方式在多种屏幕尺寸上显示给用户的设计。这可以确保应用在不同屏幕尺寸下显示正确。

响应式列布局有什么用处

响应式列布局以最高效的方式利用屏幕空间。这确保信息在不影响用户体验的情况下显示。列布局也可用于显示多个组件之间的比较。

先决条件：

React
Tailwind
Tailwind中的响应式设计

创建响应式列布局的方法：

设置一个基本的React项目并安装所需的依赖项。
创建包含列的基本布局，并添加内容。
使用Tailwind样式化内容。
添加Tailwind类使列布局具有响应式。

创建布局的步骤：

步骤1： 使用以下命令设置项目

npx create-react-app <<Project_Name>>

步骤2 ：使用命令导航到文件夹

cd <<Project_Name>>

步骤3 ：使用命令安装所需的依赖项

npm install -D tailwindcss

步骤4 ：使用以下命令创建tailwind配置文件

npx tailwindcss init

步骤5： 按照以下方式重写 tailwind.config.js 文件

/** @type {import('tailwindcss').Config} */  
module.exports = {  
  content: [  
    "./src/**/*.{js,jsx,ts,tsx}",  
  ],  
  theme: {  
    extend: {},  
  },  
  plugins: [],  
}

步骤 6： 在 src 目录下创建一个名为 components 的文件夹，并创建文件 Content.js、data.js 和 Navbar.js

项目结构：

使用React和Tailwind响应式列布局

包管理文件 package.json 中的更新的依赖项将如下所示：

"dependencies": {  
    "@testing-library/jest-dom": "^5.17.0",  
    "@testing-library/react": "^13.4.0",  
    "@testing-library/user-event": "^13.5.0",  
    "react": "^18.2.0",  
    "react-dom": "^18.2.0",  
    "react-scripts": "5.0.1",  
    "web-vitals": "^2.1.4"  
  }  
"devDependencies": {  
    "tailwindcss": "^3.3.3"  
}

示例： 在相应文件中，按如下编写代码：

App.js： 此文件导入所有组件
ThreeCol.js： 此文件为列布局创建了响应式设计
index.css： 此文件包含了tailwind css类

// App.js 
  
import logo from "./logo.svg"; 
import "./App.css"; 
import ThreeCol from "./components/ThreeCol"; 
  
function App() { 
    return ( 
        <div className="bg-gray-100 h-screen"> 
            <ThreeCol /> 
        </div> 
    ); 
} 
  
export default App;

ThreeCol.js

// ThreeCol.js 
  
export default function ThreeCol() { 
    return ( 
        <div className="flex flex-col md:flex-row bg-blue-50"> 
            <div className="w-full md:w-1/3 p-4  
                            border-b-2 md:border-r-2  
                            md:border-b-0 border-zinc-500"> 
                <h3 className="text-xl text-green-600 font-semibold mb-1"> 
                    JavaScript 
                </h3> 
                <p className="text-gray-800"> 
                    JavaScript is a lightweight, cross-platform, 
                    single-threaded, and interpreted compiled programming 
                    language. It is also known as the scripting language for
                    webpages. It is well-known for the development of web pages, 
                    and many non-browser environments also use it 
                </p> 
            </div> 
            <div className="w-full md:w-1/3 p-4  
                            border-b-2 md:border-r-2  
                            md:border-b-0 border-zinc-500"> 
                <h3 className="text-xl text-green-600 font-semibold mb-1"> 
                    React 
                </h3> 
                <p className="text-gray-800"> 
                    ReactJS is an open-source JavaScript library used to create 
                    user interfaces in a declarative and efficient way. It is a 
                    component-based front-end library responsible only for the 
                    view layer of a Model View Controller(MVC) architecture. 
                    Before you start learning ReactJS, we assume that you have 
                    knowledge of HTML, CSS and JavaScript 
                </p> 
            </div> 
            <div className="w-full md:w-1/3 p-4  
                            border-b-2 md:border-r-2  
                            md:border-b-0 border-zinc-500"> 
                <h3 className="text-xl text-green-600 font-semibold mb-1"> 
                    Node 
                </h3> 
                <p className="text-gray-800"> 
                    Node.js is an open-source and cross-platform runtime 
                    environment for executing JavaScript code outside a browser. 
                    NodeJS is not a framework and it’s not a programming 
                    language. Node.js is used to build back-end services like 
                    APIs like Web App or Mobile App. 
                </p> 
            </div> 
        </div> 
    ); 
}

CSS

/* index.css */
  
@tailwind base; 
@tailwind components; 
@tailwind utilities; 
  
body { 
    margin: 0; 
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',  
                    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',  
                    'Fira Sans', 'Droid Sans', 'Helvetica Neue', 
        sans-serif; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
  
code { 
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 
        monospace; 
}

运行应用程序的步骤：

步骤1： 在项目目录的终端中键入以下命令