顺丰科技_顺风css reactjs tailblocks快速入门组合-CSDN博客

顺丰科技

Hello everyone, in this article I want to tell you how to create a quick project using TailwindCSS, ReactJS and Tailblocks.

大家好，在本文中，我想告诉您如何使用TailwindCSS，ReactJS和Tailblocks创建一个快速项目。

Let’s start by getting acquainted with technologies.

让我们从熟悉技术开始。

Tailwind CSS is a CSS library developed by Adam Wathan. It allows you to export CSS to your elements using ready classes. It offers you a great flexibility when writing code because it doesn’t have ready components like Bootstrap, and it’s more customizable for your imagination and design capability.

Tailwind CSS是Adam Wathan开发CSS库。它允许您使用ready类将CSS导出到元素。它在编写代码时为您提供了极大的灵活性，因为它没有像Bootstrap这样的现成组件，并且可以根据您的想象力和设计能力进行自定义。

Of course, these differences bring a lot of criticism. Since there are no ready components of the program, there are those who think that it is not much different from writing inline CSS by naming too many classes.

当然，这些差异带来了很多批评。由于该程序没有现成的组件，因此有些人认为它与命名过多的类来编写内联CSS并没有太大区别。

Image for post — https://tailwindcss.com/components/buttons/#bordered https://tailwindcss.com/components/buttons/#bordered

It also gets criticism as it becomes difficult to understand because of the lack of semantic (semantic) of class nomenclature, which is very close to atomic level. I advise you to read the article below on this topic.

由于缺乏类命名的语义(语义)，这变得非常难以理解，这也引起了批评。我建议您阅读以下有关此主题的文章。

There’s a lot to say about ReactJS , but I think there’s a lot of awareness in people now, I guess there’s no one who’s heard it. For detailed information, I recommend reading the following article and ReactJS’s own document.

关于ReactJS有很多话要说 ，但是我认为现在人们已经有了很多意识，我想没有人会听到它。有关详细信息，我建议阅读以下文章和ReactJS自己的文档。

What‘s Tailblocks ? Tailblocks is a code repository developed by Mert Cukuren on Github and consists of code blocks created using TailwindCSS. I love to use it in my own projects, and I believe it provides me an excellent speed.

什么是尾巴？ Tailblocks是Mert Cukuren在Github上开发的代码存储库，由使用TailwindCSS创建的代码块组成。我喜欢在自己的项目中使用它，并且我相信它可以为我提供出色的速度。

Created in 15 different categories, these code blocks provide great convenience with responsive support, dark/light mode support and different color themes. You can start using these code blocks quickly copying and customize them for yourself. You can easily use these ready-made code blocks by converting them to jsx for your React projects.

这些代码块按15个不同类别创建，通过响应支持，暗/亮模式支持和不同的颜色主题提供了极大的便利。您可以开始使用这些代码块进行快速复制，并为自己定制它们。您可以通过将它们转换为React项目的jsx来轻松使用这些现成的代码块。

Let’s start our project.

让我们开始我们的项目。

I recently prepared a technical service website for a relative of mine, and although I did not have much time for it, I was able to make a quick project using the libraries I mentioned. I want to talk about the way I’ve been doing this project and how I’ve taken advantage of TailwindCSS’s favorite features and the Tailblocks project. The link to the project I mentioned is below.

我最近为我的一个亲戚准备了一个技术服务网站，尽管我花的时间不多，但是我能够使用我提到的库进行快速的项目。我想谈谈我进行此项目的方式以及如何利用TailwindCSS的最喜欢的功能和Tailblocks项目。我提到的项目链接如下。

We quickly create our ReactJS project using create-react-app, assuming that Node is installed on our computer. (Node >= 8.10 and npm >= 5.6)

假设Node已安装在我们的计算机上，我们将使用create-react-app快速创建ReactJS项目。 ( 节点> = 8.10和npm> = 5.6 )

npx create-react-app my-appcd my-appnpm start

Then I removed the files that we wouldn’t use that came with create-react-app. I included the react-router-dom to control the pagination structure of our project.

然后，我删除了create-react-app附带的不使用的文件。我包括了react-router-dom来控制我们项目的分页结构。

Let’s include our TailwindCSS library.

让我们包括我们的TailwindCSS库。

yarn add tailwindcss postcss-cli autoprefixer -D

After incorporating the necessary dependencies in our project using the yarn add command, we run the following command. This command creates tailwind.config.js for our project.

在使用yarn add命令将必要的依赖项合并到我们的项目中之后，我们运行以下命令。此命令为我们的项目创建tailwind.config.js。

npx tailwind init —full

Tailwind needs a build process and we use PostCSS for it. For this we create the file postcss.config.js in the directory where we are in.

Tailwind需要一个构建过程，我们为此使用了PostCSS。为此，我们在我们所在的目录中创建文件postcss.config.js。

touch postcss.config.js

And in our file we write the following codes.

然后在我们的文件中编写以下代码。

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer')
    ],
};

There are a few steps left to complete our process of incorporating TailwindCSS into the project. We create a file called styles under the src directory and open a style file named tailwind.css in it. We include the following codes and thus allow Tailwind to import CSS codes from required packages.

还剩下几步来完成我们将TailwindCSS集成到项目中的过程。我们在src目录下创建一个名为styles的文件，并在其中打开一个名为tailwind.css的样式文件。我们包含以下代码，因此允许Tailwind从所需的软件包中导入CSS代码。

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

As a final step, we replace the scripts section in our package.json file with the following codes.

最后，我们用以下代码替换package.json文件中的scripts部分。

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

We launch our application.

我们启动我们的应用程序。

yarn start

By importing the ./styles/main.css file to the app.js file in our project, our project can easily be used with TailwindCSS.

通过将./styles/main.css文件导入我们项目中的app.js文件，我们的项目可以轻松地与TailwindCSS一起使用。

import React from 'react';
import './styles/main.css';
function App() {
  return (
    <div class="h-64">
        <div class="p-4 m-4 bg-green-600">
            <h1 class="text-2xl font-bold text-white">Merhaba</h1>
        </div>
    </div>
  );
}
export default App;

Now you can quickly design your pages using TailwindCSS and Tailblocks ready code blocks. In the rest of my article, I’ll be talking about how I use them and what I like about Tailwind.

现在，您可以使用TailwindCSS和Tailblocks就绪代码块快速设计页面。在本文的其余部分，我将讨论如何使用它们以及对Tailwind的满意之处。

Tailblocks code blocks and usage examples within the project.

Tailblocks项目中的代码块和用法示例。

You can use the following block example to quickly prepare a photo catalog.

您可以使用以下方框示例快速准备照片目录。

You can design a page of different tabs and present it on your page in an interactive way.

您可以设计一个包含不同选项卡的页面，并以交互方式将其显示在页面上。

You can quickly create a contact page and provide address information with Google maps.

您可以快速创建联系页面，并通过Google地图提供地址信息。

Animate the element quickly with TailwindCSS

使用TailwindCSS快速对元素进行动画处理

You can quickly animate the cards you use. You can easily animate the element you want to apply this feature by adding class=“transform transition duration-500 hover: scale-110” code.With the “hover:” feature, you can easily apply the hover selector feature. You can customize it using other prefixes such as “focus:”, “active:”, “group-hover:” and create easy animations.

您可以快速为使用的卡片制作动画。通过添加class =“ transform transition duration-500 hover：scale-110”代码，可以轻松地为要应用此功能的元素设置动画。使用“ hover：”功能，可以轻松应用悬停选择器功能。您可以使用其他前缀(例如“ focus：”，“ active：”，“ group-hover：”)自定义它，并创建简单的动画。

You can even create Netflix slider animation by inserting your cards into a slider and applying this feature. In the example below I have not used a slider but you can test the animation on codepen.

您甚至可以通过将卡片插入滑块并应用此功能来创建Netflix滑块动画。在下面的示例中，我没有使用滑块，但是您可以在Codepen上测试动画。

You can examine the example I made with the new animation classes that came with the TailwindCSS 1.6 update in the following study.

在下面的研究中，您可以检查我使用TailwindCSS 1.6更新随附的新动画类制作的示例。

Skeleton Loading Cards with Tailwind CSS 1.6 — animate-pulse

带有Tailwind CSS 1.6的骨架加载卡—动画脉冲

I tried to convey my knowledge to you within my experience. If you would like to contact me about any of your comments, advice and feedback, please contact me through the following accounts. Thank you for taking the time to read this article.

我尝试根据自己的经验向您传达我的知识。如果您想就任何意见，建议和反馈与我联系，请通过以下帐户与我联系。感谢您抽出宝贵的时间阅读本文。