vue中使用tailwindcss

安装 点击链接到官网地址查看

• 每个脚手架的配置方式是不一样的，这里我使用vite+v3进行演示

  
  image.png
• 可以根据图中找到自己使用的脚手架进行点击之后，会有说明，然后根据说明操作即可

1. 创建项目之后，进行插件下载

npm install -D tailwindcss postcss autoprefixer

2. tailwindcss初始化，会生成两个文件 tailwind.config.js 和postcss.config.js

npx tailwindcss init -p

3. 在tailwind.config.js文件中

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

4. 可以在src下的style.css中或者自己自定义一个accset下新建css文件也可以(不过记得要在main.js中进行引入)，这个文件是之后可以进行配置覆盖css的或者自己制定一套也是可以的

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

5. 使用npm run dev启动项目了
6. 如果你使用的是vscode，可以下载TailWind CSS IntelliSense会有代码提示

下面就让我们开始学习使用吧

1、如果你想自定义一套，在tailwind.config.js中进行改写，如下图，在extend中修改的话，只修改你写的部分，其他的都是继承原来的属性，但是要在extend之外写，那么默认的样式就不会生效，只会生效你写的代码。写法的话还是按照默认的那种写法，如边框宽度---border-1这是你写的，然后默认border-2等代码不会生效，你可以试试

image.png
2、具体的一些样式写法可查看官方文档