配置vite+vue3+tailwindcss

孙泽辉

环境配置

发布于：2021年8月27日

字数：271字

时长：1分钟

次浏览

前两天试了vite，真的快，再配合上tailwindcss，那写起代码来得有多爽！

初始化项目

之前摸索了好久，就是跑不起来，进入首页显示page not found。

今天早上百度搜到了个人家写好的模板，话不多说，立即克隆下来：

web2033/vite-vue3-tailwind-starter: Vite + Vue 3 + Tailwind CSS (starter) ⚡ (github.com)

git clone https://github.com/web2033/vite-vue3-tailwind-starter
cd vite-vue3-tailwind-starter
yarn
yarn dev
yarn build
yarn serve

使用了vite启动只要一眨眼的功夫，真快！

启动之后界面长这样：

试试用tailwind写个水平垂直居中：

安装代码提示插件

vscode里安装代码提示插件：Tailwind CSS IntelliSense

我刚装上的时候没有代码提示，要在setting.json里加上这句

"editor.quickSuggestions": {
    "strings": true
}

可以，到这就算配置好了。

附上tailwind的文档链接：

Documentation - Tailwind CSS

其他

记录一个最近学到的水平垂直居中的写法，其实就是简写形式。。。

body,html {
    height: 100%;
}

body {
    display: grid;
    place-items: center;
    /* 等同于：
    align-items: center;
    justify-items: center; */
}