美文网首页
vue中使用tailwindcss

vue中使用tailwindcss

作者: 焚心123 | 来源:发表于2024-03-18 14:52 被阅读0次

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

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


    image.png
  • 可以根据图中找到自己使用的脚手架进行点击之后,会有说明,然后根据说明操作即可
  1. 创建项目之后,进行插件下载
npm install -D tailwindcss postcss autoprefixer
  1. tailwindcss初始化,会生成两个文件 tailwind.config.jspostcss.config.js
npx tailwindcss init -p
  1. 在tailwind.config.js文件中
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. 可以在src下的style.css中或者自己自定义一个accset下新建css文件也可以(不过记得要在main.js中进行引入),这个文件是之后可以进行配置覆盖css的或者自己制定一套也是可以的
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. 使用npm run dev启动项目了
  2. 如果你使用的是vscode,可以下载TailWind CSS IntelliSense会有代码提示

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

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

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

相关文章

网友评论

      本文标题:vue中使用tailwindcss

      本文链接:https://www.haomeiwen.com/subject/enzazdtx.html