这个章节我们来介绍怎麽安装 Tailwind,和使用 Tailwind
我们一样使用 create-react-app
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
因为 Create React App 不能复写 PostCSS 设定,所以我们需要安装 CRACO 来设定 Tailwind
安装好了之後,修改 package.json
档案中的 scripts
以使用 craco
而不是 react-scripts
,除了 eject
以外的指令都要修改:
`{
// ...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
},接下来在 craco.config.js 做设定
// craco.config.js
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}
产生 tailwind config 档
npx tailwindcss-cli@latest init
让 Tailwind 在生产环境建置时移除不必要的样式
// tailwind.config.js
module.exports = {
purge: [],
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
在 react 中使用 taiwind 样式
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
接着在 App.js 中 import index.css
,确保 taiwind 有被引用
// 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')
);
<<: [DAY 13] _ADXL345_I2C时序说明 (ADXL345)
这次要来细讲回圈了 上次说到回圈有分成:1. for回圈,2. while回圈以及3. do whi...
本篇分享自制一个简易抽奖程序码啦!---以JQ为例 ▼完成图如下 为了让大家比较好懂,程序码用这张...
嗨!我是莉莉,目前是个软件工程师。去年因为公司内部任务接触到和资安相关的议题,开始对资讯安全感兴趣、...
Python - PyEnchant 英文单字拼写检查套件参考笔记 参考资料 参考资料: pyenc...
昨天提到了 Web Component , 今天先初步了解一下什麽是 WebComponent 跟他...