react项目中css_用React和顺风CSS启动项目

react项目中css

React is one of the most important players in today’s modern web development. Due to its simplicity and better design, anyone can pick it up and start building something in a couple of days. Not only this, for an independent developer like myself, building a side project is a breeze. Being a JavaScript library, it even fits well together in the MERN stack allows us to create whole full stack side projects. However, integrating a better-designed CSS is still a problem (for me at least). Although there are a couple of better tools, libraries, and frameworks, they come with built-in design systems, and most of our development time is wasted in overriding their default styles.

React是当今现代Web开发中最重要的参与者之一。 由于其简单性和更好的设计，任何人都可以在几天之内拿起它并开始建造东西。 不仅如此，对于像我这样的独立开发人员来说，构建辅助项目也很容易。 作为一个JavaScript库，它甚至可以很好地集成到MERN堆栈中，这使我们可以创建整个完整堆栈侧的项目。 但是，集成设计更好CSS仍然是一个问题(至少对我而言)。 尽管有一些更好的工具，库和框架，但它们带有内置的设计系统，并且我们大多数的开发时间都浪费在重写其默认样式上。

This article is about one of the best CSS frameworks that I have used in my development career and how to integrate it with the React project so that we can build anything super fast .

本文是关于我在开发生涯中使用过的最佳CSS框架之一，以及如何将其与React项目集成在一起，以便我们可以快速构建任何东西。

什么是Tailwind CSS？ (What is Tailwind CSS?)

Tailwind CSS is a highly customizable, low-level CSS framework that gives us all of the building blocks we need to build better designs. So, it is simply a utility first CSS framework. I got hooked into Tailwind CSS when I first find out that I do not have to write a lot of CSS to make my application look pretty. According to their official documentation:

Tailwind CSS是高度可定制的低级CSS框架，它为我们提供了构建更好的设计所需的所有构建块。 因此，它只是实用程序优先CSS框架。 当我第一次发现不必为使应用程序看起来更漂亮而编写大量CSS时，便迷上了Tailwind CSS。 根据他们的官方文件 ：

If you're sick of fighting the framework, overriding unwanted styles, and battling specificity wars, Tailwind was made for you.

如果您厌倦了与框架打架，改写不需要的样式以及与特定性战争作斗争，那么Tailwind就是为您准备的。

Apart from many other frameworks like Material UI and Bootstrap, with the tailwind, we do not get the default theme and their built-in library of components. Instead, tailwind just provides us the list of class name and features that makes it way easier to build UI fast. And the most important thing is how perfect it fits together with React and its componentized design.

除了诸如Material UI和Bootstrap之类的许多其他框架之外，我们还没有获得默认主题及其内置的组件库。 取而代之的是，顺风向我们提供了类名和功能的列表，这使我们可以更轻松地快速构建UI。 最重要的是，它与React及其组件化设计完美地融合在一起。

For example, we can easily style a button with hover and active styles without leaving HTML

例如，我们可以轻松地将鼠标悬停和活动样式设置为样式，而无需离开HTML

Button

Button created from above code 从上面的代码创建的按钮

Some worth noting features of Tailwind CSS are:

Tailwind CSS的一些值得注意的功能是：

• It makes it way easier to build responsive designs.
  它使构建响应式设计变得更加容易。
• It provides fully featured customization with built-in theming system
  它通过内置主题系统提供功能齐全的自定义
• Forget about writing all those long class names.
  忘记写所有那些长类名了。
• In tailwind, we are simply using the same classes over and over again so it has benefits over CSS caching.
  顺带一提，我们只是一遍又一遍地使用相同的类，因此它比CSS缓存更具优势。

You can find more about tailwind on their official website at tailwindcss.com

你可以找到更多关于顺风在其官方网站tailwindcss.com

建立 (Setup)

Before adding tailwind CSS, we need to first create a react project first. Simply, bootstrap react project with its create-react-app and cd into it.

在添加顺风CSS之前，我们需要先创建一个react项目。 简单来说，引导React项目及其create-react-app和cd进入其中。

npx create-react-app count-it
cd count-it

There are two ways we can add tailwind to our React project:

我们可以通过两种方式向React项目添加顺风：

通过CDN使用顺风 (Using tailwind via CDN)

We can simply add the above link tag in public/index.html and easily used all the classes provided by tailwind. However, many features like customization, directives, and installing plugins are not available using CDN.

我们可以简单地在public/index.html添加以上链接标记，并轻松使用tailwind提供的所有类。 但是，使用CDN不能使用许多功能，例如自定义，指令和安装插件。

通过npm安装顺风 (Installing tailwind via npm)

npm i tailwindcss autoprefixer postcss-cli

So, what is autoprefixer and postcss-cli? Post CSS is a tool for transforming CSS with JavaScript. It gives CSS some superpower by adding features like mixins and variables. Autoprefixer is a post-processor adds and removes vendor prefixes like -webkit and -moz. More details on https://tailwindcss.com/docs/installation.

那么，什么是autoprefixer和postcss-cli ？ Post CSS是使用JavaScript转换CSS的工具。 通过添加诸如mixin和变量之类的功能，它为CSS提供了一些超能力。 Autoprefixer是后处理器，它添加和删除供应商前缀，例如-webkit和-moz 。 有关https://tailwindcss.com/docs/installation的更多详细信息。

Now, we need to initialize tailwind’s configuration:

现在，我们需要初始化顺风的配置：

npx tailwind init tailwind.config.js # with zero configuration## or npx tailwind init tailwind.config.js --full # with all default configurationtouch postcss.config.js

After the above command, we have to files tailwind.config.js which contains all our default configuration and an empty postcss.config.js file.

上面的命令后，我们必须将文件tailwind.config.js它包含了所有我们的默认配置和空postcss.config.js文件。

If you are curious on what is the default configuration, you find can https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

如果您对默认配置感到好奇，可以找到https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/defaultConfig.stub.js

For making use of PostCSS to lint our CSS and adding that autoprefixer add following code in post CSS config file.

为了使用PostCSS整理我们CSS并添加该自动前缀，请在post CSS配置文件中添加以下代码。

module.exports = {
    plugins: [
        require("tailwindcss")("./tailwind.config.js"),
        require("autoprefixer")
    ]
}

Now we need to get all the goodies that come with the tailwind. Create a CSS file copy the code below:

现在，我们需要获得所有顺风顺水的东西。 创建一个CSS文件，复制以下代码：

/* For simplicity I have added this styles.css in root of the project */@tailwind base; /* For base styles (check out normalize.css)  */
@tailwind components; /* Simple reuseable components provided by tailwind */
@tailwind utilitiess; /* utility classes generated based on our tailwind.config.js */

Next, we need to configure our project to build our CSS styles each time we run our application:

接下来，我们需要配置项目以在每次运行应用程序时构建CSS样式：

"scripts": {
    "start": "npm run watch:css && react-scripts start",
    "watch:css": "postcss src/styles.css -o src/main.css"
  },

Simply import that src/main.css (which is the compiled version of our tailwind CSS) in the root file of our React project.

只需将src/main.css (这是我们的windwind CSS的编译版本)导入到React项目的根文件中即可。

import React from "react";
import ReactDOM from "react-dom";
// Import compiled version of tailwind
import './main.css';import App from "./App";ReactDOM.render(, document.getElementById("root"));

That’s it for tailwind setup. Let’s try to build a simple count it app we bootstrapped above.

顺风车设置就是这样。 让我们尝试构建一个我们上面引导过的简单计数应用程序。

用法 (Usage)

Now let’s try to build a simplest React app.

现在让我们尝试构建一个最简单的React应用。

import React from "react";const Counter = () => {
  const [num, setNum] = React.useState(0);
  const subtract = () => setNum(num - 1);
  const add = () => setNum(num + 1);  return (
    <>
      
Count It
      

                  className="bg-green-400 hover:bg-green-800 text-white 
                     font-bold rounded py-2 px-4 m-8"
          onClick={subtract}
        >
          -
                {num}
                      className="bg-green-400 hover:bg-green-800
                      text-white font-bold rounded py-2 px-4 m-8"
          onClick={add}
        >
          +
        
      
    
  );
};export default Counter;

In the above code, we created a simple Counter component. The major feature of this component is to increase and decrease the counter state. We added subtract and add click handler for each button we have and displayed that number.

在上面的代码中，我们创建了一个简单的Counter组件。 该组件的主要特征是增加和减少计数器状态。 我们为每个按钮添加了subtract并add单击处理程序，并显示了该数字。

Here is the explanation of the above CSS

这是上述CSS的解释

    ....

{/* Here, we used out flex system to layout out btns and number. The md: prefix allowed us to create responsive design.  */} + 
{/* We added a green shade for backgorund, and another more darker shade of green when button is hovered. We made text white, font bold, button rounded and gave some padding and margin to the button */}{num}
{/* We can give font size using text-4xl. Here 4xl is defined in tainwind.config.js */}

Responsive Count It App 响应计数应用程序

This is one of the simplest components that we could make using React. Now, let's add that component to our index.js file.

这是我们可以使用React制作的最简单的组件之一。 现在，让我们将该组件添加到我们的index.js文件中。

import React from "react";
import ReactDOM from "react-dom";
// Import compiled version of tailwind
import './main.css';// import App from "./App";
// component we just created above
import Counter from "./Counter";ReactDOM.render(, document.getElementById("root"));

结论 (Conclusion)

“Count it” is one of the simplest apps to showcase how we can use tailwind. For an idea bigger projects, we could add many components with their respective styles inside.

“算上它”是展示我们如何使用顺风的最简单的应用程序之一。 对于较大的项目，我们可以在内部添加许多具有各自样式的组件。

翻译自: https://medium.com/swlh/start-your-project-with-react-and-tailwind-css-dc09323c8fa0

react项目中css