关于react.js:关于在-React-项目中使用-Tailwind-CSS-的简单记录

36次阅读

共计 2566 个字符，预计需要花费 7 分钟才能阅读完成。

Tailwind CSS 就是一个 CSS 框架，正如你所晓得的 bootstrap，element ui，Antd，bulma。一样。将一些 css 款式封装好，用来减速咱们开发的一个工具。

然而它有与上述的框架有所不同，上述的框架更多的是一种可复用性的组件，例如一个按钮、一个表单、或者一个表格等等，他们封装了大量的罕用 UI 组件。然而 Tailwind CSS 与他们有实质的不同，它并没有封装某个具体的组件，而是封装了大量可复用的 css 款式。antd 等框架的劣势是在你须要某种实现某一个 UI 组件的时候，能够拿来即用，能够疾速高效的交付一个我的项目，然而也有其毛病，他们都封装都带的款式，而当你想要自定义一些个性化的款式的时候，就会发现这种操作比拟艰难，自由度很低，强行去批改它的款式会很难看，而且这些操作也会不优雅。

而 Tailwind CSS 则解决了这样的弊病，他自由度极高，能够得心应手的实现咱们想要的成果。咱们仅需将按咱们的需要去引入一个个根本的款式，也能够退出一些本人的款式。更值得一提的是，尽管他的自由度极高，然而他的设计却能够保障下我的项目的中组件的格调一致性，并且其自带的一些业余的色彩体系，也是十分值得学习和应用的。同样的也有本人的毛病，首先是他的引入形式，是通过 class 去进行引入，这将导致某些组件或者元素的 class 十分的长，html 文件里就显得很芜杂；另外还有他的学习老本也比拟高（当然这是每一种框架肯定会呈现的），初学者应用的时候，须要一直的去查看文档（当然也能够应用 vscode 插件，学会其语义化规定还是挺不便的）；最初，因为他是一些纯 CSS，短少与 JavaScript 的联合，所以很多须要配合 JavaScript 实现的组件，如下菜单等等，均没有方法通过纯正的 Tailwind CSS 去实现这样的成果。

创立 react 我的项目

npx create-react-app tailwindcss_demo --template typyscript

初始化 tailwind CSS

装置 Tailwind 以及其它依赖项:

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

据说 Create React App 尚未反对 PostCSS 8，所以须要装置 Tailwind CSS v2.0 PostCSS 7 兼容性版本。

装置和配置 CRACO

npm install @craco/craco

装置结束后，更新 package.json 文件中的 scripts，将 eject 以外的所有脚本都用 craco 代替 react-scripts。

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

接下来，在我的项目根部创立一个 craco.config.js，并增加 tailwindcss 和 autoprefixer 作为 PostCSS 插件。

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

创立配置文件

npx tailwindcss-cli@latest init

这将会在您的我的项目根目录创立一个最小化的 tailwind.config.js 文件：

// tailwind.config.js
module.exports = {purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {extend: {},
  },
  variants: {extend: {},
  },
  plugins: [],}

配置 Tailwind 来移除生产环境下没有应用到的款式申明

在您的 tailwind.config.js 文件中，配置 purge 选项指定所有的 components 文件，使得 Tailwind 能够在生产构建中对未应用的款式进行摇树优化。

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

在 CSS 中引入 Tailwind

关上 Create React App 默认为您生成的 ./src/index.css 文件并应用 @tailwind 指令来蕴含 Tailwind 的 base、components 和 utilities 款式，来替换掉原来的文件内容。

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Tailwind 会在构建时将这些指令转换成所有基于您配置的设计系统生成的款式文件。
最初，确保您的 CSS 文件被导入到您的 ./src/index.js 文件中。

// src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import reportWebVitals from './reportWebVitals'

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

// ...