前端工程化 -- 配置TailwindCss

本文提供两种在前端项目中配置TailwindCss的方法,希望能够帮助到被配置烦扰的同学。

1. 在CRA项目中配置tailwindcss

  1. eject前准备
csharp 复制代码
git init && git add . && git commit -m "init"
  1. 释放配置

    yarn eject

  2. 初始化tailwindcss的配置

csharp 复制代码
npx tailwindcss init
  1. 修改其中的配置
css 复制代码
content: ["./src/**/*.{ts,tsx,js,jsx}", "./public/index.html"],
  1. 引入tailwindcss的预置样式src/index.css文件头部增加:
less 复制代码
@tailwind base;
@taiwind components;
@tailwind utilities;
  1. 使用index.csssrc/index.tsx中引入index.css:
arduino 复制代码
import "./index.css";
  1. 测试 使用下面的代码测试是否配置成功:
css 复制代码
<div className="bg-blue-300 text-white p-4">Hello, Tailwind Css !</div>
  1. 运行项目
sql 复制代码
yarn start

2. 在非CRA项目中配置tailwindcss

  1. 使用webpack-cli快速生成基础配置
csharp 复制代码
yarn init -y
npx webpack init

选择"y",然后再次运行该命令。 2. 卸载自动安装的postcss和loader

arduino 复制代码
yarn remove postcss postcss-loader
  1. 安装tailwindcss及配套的postcss
sql 复制代码
yarn add postcss@8.4.4 postcss-flexbugs-fixes@5.0.2 postcss-loader@6.2.1 postcss-normalize@10.0.1 postcss-preset-env@7.0.1 tailwindcss@3.0.2
  1. 初始化tailwindcss配置项
csharp 复制代码
npx tailwindcss init
  1. 修改其中的配置
css 复制代码
content: ["./src/**/*.{ts,tsx,js,jsx}", "./index.html"],
  1. 创建样式文件
bash 复制代码
touch src/index.css
  1. 在样式文件中引入tailwindcss
less 复制代码
@tailwind base;
@taiwind components;
@tailwind utilities;
  1. 在src/index.ts中使用index.css
arduino 复制代码
import "./index.css";
  1. 在index.html中使用样式
css 复制代码
<div class="bg-blue-300 text-white p-4">Hello, Tailwind Css !</div>
  1. 修改webpack.config.js中的配置 替换postcss-loader的配置为:
javascript 复制代码
{
  loader: require.resolve('postcss-loader'),
  options:{
    postcssOptions:{
      ident: "postcss",
      config: false,
      plugins: !useTailWind ? [
        "postcss-flexbugs-fixes",
        ["postcss-preset-env", {
          autoprefixer: {flexbox: "no-2019"},
          stage: 3,
        }],
        "postcss-normalize",
      ]:[
        "tailwindcss",
        "postcss-flexbugs-fixes",
        ["postcss-preset-env", {
          autoprefixer: {flexbox: "no-2019"},
          stage: 3,
        }],
      ]
    }
  }
}

其中,const useTailWind = fs.existsSync(path.join("./", "tailwind.config.js")); 用于检查是否存在tailwind.config.js文件,以确定是否使用tailwindcss。 11. 测试

r 复制代码
yarn serve
yarn build:prod

以上是在CRA项目和非CRA项目中配置tailwindcss的步骤和代码示例。

相关推荐
paopaokaka_luck42 分钟前
基于SpringBoot+Uniapp的健身饮食小程序(协同过滤算法、地图组件)
前端·javascript·vue.js·spring boot·后端·小程序·uni-app
患得患失9491 小时前
【前端】【vscode】【.vscode/settings.json】为单个项目配置自动格式化和开发环境
前端·vscode·json
飛_1 小时前
解决VSCode无法加载Json架构问题
java·服务器·前端
YGY Webgis糕手之路4 小时前
OpenLayers 综合案例-轨迹回放
前端·经验分享·笔记·vue·web
90后的晨仔4 小时前
🚨XSS 攻击全解:什么是跨站脚本攻击?前端如何防御?
前端·vue.js
Ares-Wang4 小时前
JavaScript》》JS》 Var、Let、Const 大总结
开发语言·前端·javascript
90后的晨仔4 小时前
Vue 模板语法完全指南:从插值表达式到动态指令,彻底搞懂 Vue 模板语言
前端·vue.js
德育处主任5 小时前
p5.js 正方形square的基础用法
前端·数据可视化·canvas
烛阴5 小时前
Mix - Bilinear Interpolation
前端·webgl
90后的晨仔5 小时前
Vue 3 应用实例详解:从 createApp 到 mount,你真正掌握了吗?
前端·vue.js