tailwindcss+vue3+vite+preline项目搭建

最近原子化样式比较火，用了一下确实还不错，也确实是用一些标准的样式能够使网页看起来比较统一，而且能够极大的减轻起名字的压力，有利有弊，就不一一细说了。
之前开发都是习惯于使用vite+vue3来开发的，此次搭建项目也是以这个为例子。
tailwindcss搭建的流程，参考https://tailwindcss.com/docs/guides/vite#vue

创建项目

npm create vite@latest my-project -- --template vue
cd my-project

安装tailwindcss及一些插件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改一下tailwind.config.js配置文件

export default {
   
   
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
   
   
    extend: {
   
   },
  },
  plugins: [],
}

把tailwind指令添加到主样式文件中

一般来说样式文件在 ./src/style.css 中，直接添加到结尾

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

启动～

npm run dev

修改一下试试

修改App.vue的文件内容