全网最详细，tailwindcss在vue2中的使用教程

帅皮2024-03-05 13:56

这里是官网的参考文档tailwindcss，有兴趣的可以自己去查看下，我下面将贴出我个人使用tailwindcss的教程，在这个过程中我使用的node.js的版本是16.14.2。

1.创建vue2项目（已经创建的可以自动跳过这步）

arduino 复制代码

//这里app是你项目的名字，可更改
vue create app

运行后为下图界面，选择Default ( $Vue 2$ babel , eslint)，等待创建完成

编辑

创建完成界面

编辑

2.项目初始化并启动项目

arduino 复制代码

//运行npm install安装所需的包
npm install
//启动项目
npm run serve

此时项目成功启动，出现的画面如下

3.安装tailwindcss

kotlin 复制代码

//直接运行下载
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

运行后界面如下编辑

在当前目录下，创建postcss.config.js文件，内部代码如下

css 复制代码

// postcss.config.js
module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

在当前目录执行如下代码创建tailwind.config.js

csharp 复制代码

npx tailwindcss init

创建成功后会出现下图文件

yaml 复制代码

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

打开src下的main.js文件，增加如下代码

arduino 复制代码

 import "tailwindcss/tailwind.css";

此时重新运行项目有些事可以成功运行，可能也会报错，没关系，我们还需要增加以下一步，在vue.config.js文件中增加如下代码

css 复制代码

//vue.config.js 
css: {
    loaderOptions: {
      postcss: {
        postcssOptions: {
          plugins: [
            require('tailwindcss'),
            require('autoprefixer')
          ]
        }
      }
    }
  }

进入设置中的插件，下载如下插件，并重启项目，插件能够让你在写class的时候自动联想，更加便于开发，

最终实现效果如下，我添加了class="bg-blue-600"，文字对应的背景变成了蓝色，至此，项目结束