TailWind css 与 React框架结合使用

简介

TailWind.css是什么？(顺风)？他是一个CSS的工具集。

Tailwind CSS 是一个高度可定制的基础层 CSS 框架，它为您提供了构建定制化设计所需的所有构建块，而无需重新覆盖任何内建于框架中的设计风格。

繁杂

在日常的项目开发阶段，我们最头疼的就是各种情况的兼容和布局自适应问题，每当不同的业务场景和数据场景都会出现不同的布局适应问题，这个时候开发人员大量时间都会忙于调试布局问题，兼容问题，包括每一个页面基础架子的搭建，都会需要重新设计，除非你自己设计一套可以兼容该项目的CSS框架，这个时候TailWind.css就帮助我们高效的完成了页面布局，特效编写，自适应兼容等问题了。

那我们就开始吧，看看如何在React项目中使用这个框架吧

创建一个React项目

通过使用create-react-app命令创建一个新的React项目

npx create-react-app cra-tailwind-template
cd cra-tailwind-template

如果没有安装过create-react-app包,会先安装包， 输入yes直接安装

这样成功创建一个React的项目模板，并进入到项目的根目录

安装Tailwind CSS

通过一下命令执行安装

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

配置Craco

Craco是一个为通过在应用程序的根目录中添加craco.config.js文件，即可给eslint，babel，postcss等添加自定义配置，这样可以统一集中化管理所有的配置。你创建项目的REact项目而使用的简易的配置层。

npm install @craco/craco

安装好之后，编辑项目中package.json文件scripts部分

"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
},

接下来，我们需要在项目根目录手动创建一个craco.config.js文件，并且添加tailwind和autoprefix作为PostCSS插件

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

接着正式在项目中引入tailwind CSS框架，通过以下命令创建tailwind.config.js文件

npx tailwind init

创建好的文件位于项目的根目录下

编辑tailwind.config.js文件

下面，我们需要对tailwind.config.js文件进行编辑，将配置里purge项根据模板的路径，这样避免没有使用到的样式编译进生产环境的代码中

module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, 
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

将Tailwind引入到CSS中

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

最后将index.css引入到你的src/index.js文件中

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'; // include index.css
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

到此，所有的配置就结束了，我们可以在模板或者页面文件中使用Tailwind CSS了

这里注意使用TailWind CSS 我们需要注意你下载不同版本的TailWind CSS 和自己电脑node的版本

https://tailwindcss.com/

小试牛刀