安裝 Tailwind
开始安装 tailwind 和相关所需的组件。
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
为了开启jit模式,并使其顺利运行,需要安装cross-env,监听变化,动态生成样式
npm install -D cross-env
设置 Tailwind
上面这些东西安装完了,我们就开始执行指令来配置:
npx tailwindcss init -p --jit
修改配置
接着开启 tailwind.config.js 设置 purge 监听文件范围:
module.exports = { mode: 'jit', purge: [ './public/**/*.{html}', './src/**/*.{vue,js,ts,html}' ], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, plugins: [], }
使用 CSS
接着,到 ./src 文件夹中新增一个文件 tailwind.css,並新增以下內容:
@tailwind base; @tailwind components; @tailwind utilities;
然后修改 ./src 文件夹的 main.js,增加一行 css 的引用:
import { createApp } from 'vue' import App from './App.vue' import './tailwind.css' // ← ← ← 新增這行 createApp(App).mount('#app') ...
然后
终于到了最后的步骤了,修改根目录的package.json,修改scripts指令如下
"scripts": { "serve": "cross-env TAILWIND_MODE=watch vue-cli-service serve", "build": "cross-env TAILWIND_MODE=build vue-cli-service build", "lint": "vue-cli-service lint" },
使用 Tailwind
上面步骤做完之后,可以开启服务使用了。
执行npm run serve,就可以去浏览网站了! http://localhost:8080/
书写代码:
<div class="mt-[300px] w-[500px]"> </div>
尽情的编写tailwind,使用jit及时更新吧!
随缘而来,乘风而去,山高海阔,自有我风采!
所属分类:
Node.js