导航菜单
登录 注册

安装 Tailwind CSS

npm install tailwindcss

创建 TailwindCSS 配置文件

npx tailwindcss init

这一步骤会自动在根目录下创建tailwind.config.js
内容修改为

/** @type {import('tailwindcss').Config} */
module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

安装 PostCSS 和 autoprefixer

由于 Tailwind 不会自动添加浏览器引擎专属前缀到生成的 CSS 中,建议安装 autoprefixer 去处理这个问题。

npm install -D postcss autoprefixer

创建 PostCSS 配置文件

我们在项目根目录下手动创建postcss.config.js
内容如下

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

引入 TailwindCSS

手动创建tailwind.css,存放到哪里都可以,我的是Vuetify项目,所以我粗放到src/styles下。
内容如下:

@tailwind base;
@tailwind components;
@tailwind utilities;

然后在 src/main.js 文件中引入。

/**
 * main.js
 *
 * Bootstraps Vuetify and other plugins then mounts the App`
 */

// Components
import App from './App.vue'
import '@/styles/tailwind.scss'

// Composables
import { createApp } from 'vue'

// Plugins
import { registerPlugins } from '@/plugins'

const app = createApp(App)

registerPlugins(app)

app.mount('#app')
JJ:高仿掘金,开源主题
上一篇
PHP 实现图片验证码之给 Typecho 评论加上验证码
下一篇

精选留言

仅有一条评论

  1. uuydbldouk
    上海市

    2025年10月新盘 做第一批吃螃蟹的人coinsrore.com
    新车新盘 嘎嘎稳 嘎嘎靠谱coinsrore.com
    新车首发,新的一年,只带想赚米的人coinsrore.com
    新盘 上车集合 留下 我要发发 立马进裙coinsrore.com
    做了几十年的项目 我总结了最好的一个盘(纯干货)coinsrore.com
    新车上路,只带前10个人coinsrore.com
    新盘首开 新盘首开 征召客户!!!coinsrore.com
    新项目准备上线,寻找志同道合的合作伙伴coinsrore.com
    新车即将上线 真正的项目,期待你的参与coinsrore.com
    新盘新项目,不再等待,现在就是最佳上车机会!coinsrore.com
    新盘新盘 这个月刚上新盘 新车第一个吃螃蟹!coinsrore.com