笔者最近换了工作,由于项目中使用到了React-create-app来初始化创建项目,用到了TailwindCSS来做UI,按照之前的项目经验, 通过
npm install -D tailwindcssnpx tailwindcss init
来初始化TailwindCSS, 通过
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
来拓展, 通过下面的来添加TailwindCSS指令,
@tailwind base;
@tailwind components;
@tailwind utilities;
然后通过新建路一个build-css.sh的脚本把tailwind css构建成output.css来使用,
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
然后在package.json中修改start需要运行的指令:
"scripts": { "start": "react-scripts start & build-css.sh", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" },
但是令笔者疑惑的是为什么脚本不能并发的执行?经过一番了解之后, windows似乎是不支持,具体的解决办法就是安装 concurrently 来解决跨平台问题, 具体做法如下:
npm install concurrently -g
修改package.json 中刚添加的脚本:
"scripts": { "start": "concurrently \"react-scripts start\" \"build-css.sh\"", .....
},
现在重新启动 npm start 就可以实现并发执行脚本的效果了.