Web

yarn+vite+vue3+typescript 安装 tailwind

Lan
Lan
2023-02-23 / 0 评论 / 231 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2023年02月23日,已超过398天没有更新,若内容或图片失效,请留言反馈。
  1. 创建vite项目yarn create vite
    https://gitlab.com/Vastsa/lanpicbed/-/raw/master/zb_users/upload/2023/02/450d7914a2ca48c4829d3f4476debb45.png
    输入项目名称,选择Vue
    www.lanol.cn
    选择Customize with create-vue
    www.lanol.cn
    根据需求选一下
    www.lanol.cn
  2. 根据指令,cd到项目目录里面之后,执行yarn
    www.lanol.cn
  3. 安装tailwind, yarn add tailwindcss postcss autoprefixer
    www.lanol.cn
    参考:https://tailwindcss.com/docs/guides/vite#vue
    生成配置文件yarn tailwindcss init
    重点来了:由于是typescript,所以需要将后缀js重命名为cjs。
    www.lanol.cn
    编辑:tailwind.config.cjs文件,输入以下内容:

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

    再编辑src/assets/main.css替换成以下内容:

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

编辑src/App.vue,添加一行内容,并保存

<h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>

www.lanol.cn

  1. 启动yarn dev
    www.lanol.cn

已生效(h1加了下划线)
www.lanol.cn

0

评论 (0)

取消