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

这里是官网的参考文档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",文字对应的背景变成了蓝色,至此,项目结束

相关推荐
勤奋菲菲1 小时前
Vue3+Three.js:requestAnimationFrame的详细介绍
开发语言·javascript·three.js·前端可视化
前端开发呀2 小时前
无所不能的uniapp拦截器【三】uni-app 拦截器核心流程解析
前端·javascript·微信小程序
云和数据.ChenGuang2 小时前
vue中构建脚手架
前端·javascript·vue.js
渣哥2 小时前
面试官最爱刁难:Spring 框架里到底用了多少经典设计模式?
javascript·后端·面试
朱昆鹏2 小时前
如何通过sessionKey 登录 Claude
前端·javascript·人工智能
wdfk_prog2 小时前
klist 迭代器初始化:klist_iter_init_node 与 klist_iter_init
java·前端·javascript
code_Bo3 小时前
基于vxe-table进行二次封装
前端·javascript·vue.js
闭着眼睛学算法3 小时前
【双机位A卷】华为OD笔试之【模拟】双机位A-新学校选址【Py/Java/C++/C/JS/Go六种语言】【欧弟算法】全网注释最详细分类最全的华子OD真题题解
java·c语言·javascript·c++·python·算法·华为od
晴殇i3 小时前
为什么现代 JavaScript 代码规范开始建议禁止使用 else ?
前端·javascript·前端框架
源力祁老师3 小时前
OWL与VUE3 的高级组件通信全解析
前端·javascript·vue.js