在vue2中使用tailwindcss(完整教程)

如果你看过好多教程之后,还是报错,无法使用tailwindcss,我希望本教程可以让你成功上岸。

环境要求

  • node:>=v14.17.0

安装tailwindcss

由于最新的tailwind css使用post css 8版本,vue2框架暂时还不支持,所以需要指定安装postcss7的版本

bash 复制代码
npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

安装之后检查版本:

json 复制代码
"dependencies": {
    "@tailwindcss/postcss7-compat": "^2.2.17"
},
"devDependencies": {
    "autoprefixer": "^9.1.0",
    "css-loader": "^0.28.8",
    "postcss": "^7.0.39",
    "postcss-loader": "^3.0.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17"
  },

创建tailwindcss文件

在 assets 文件夹下创建 tailwendcss.css文件

css 复制代码
@tailwind base;
@tailwind components;
@tailwind utilities;

在入口文件main.js中引入

javascript 复制代码
import '@/assets/tailwindcss.css'

创建tailwindcss的配置文件

bash 复制代码
# 创建一个空的tainwind css配置文件
npx tailwindcss init

此时会生成一个 tailwindcss.config.js 文件,文件内容根据自己项目来定,需要自己添加purge,大致如下

javascript 复制代码
/** @type {import('tailwindcss').Config} */
module.exports = {
//文件路径根据自己项目来定,可能是 ./src/**/*.{js,ts,jsx,tsx}
  purge: [ "./app/**/*.{js,jsx,vue}", "./app/index.html" ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {}
  },
  variants: {},
  plugins: []
};

配置postcss(关键步骤)三种方式根据不同项目

一、如果你的项目使用的是vue-cli创建的,请修改vue.config.js文件:

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

二、如果你的项目直接使用的是webpack,请修改webpack.config.js(名字不一定,也可能是其他webpcak的配置文件名):

javascript 复制代码
module: {
    rules: [
        {
            test: /\.(sa|sc|c)ss$/,
            use: [
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: loader => [
                    require('tailwindcss'),//这里是关键点
                    require('autoprefixer'),
                    require('cssnano'),
                  ],
                },
              },
              'sass-loader',
            ],
          },
    ]
}

三、如果你的项目配置文件vue.config.jswebpack.config.js没有配置postcss,下面这种方式才能生效

项目根目录下的 postcss.config.js 文件,将 tailwindcssautoprefixer 添加到你的 PostCSS 配置中。

javascript 复制代码
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

在项目中愉快的用起来吧

html 复制代码
<div class="flex justify-center">flex居中</div>

注意

一般会在配置postcss这一步时遇到问题,亲身踩坑,一定要注意看这一步怎么配置的。如果你的项目还是有问题可以留言,我们一起解决。

相关推荐
前端李易安3 小时前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
loey_ln5 小时前
webpack配置和打包性能优化
前端·webpack·性能优化
Amd7948 小时前
Nuxt.js 应用中的 webpack:compile 事件钩子
webpack·自定义·编译·nuxt.js·构建·钩子·逻辑
三天不学习13 小时前
前端工程化-node/npm/babel/polyfill/webpack 一文速通
前端·webpack·npm
前端青山14 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
前端与小赵1 天前
什么是Webpack,有什么特点
前端·webpack·node.js
生椰拿铁You1 天前
03 —— Webpack 自动生成 html 文件
前端·webpack·node.js
Amd7941 天前
Nuxt.js 应用中的 webpack:configResolved事件钩子
webpack·自定义·开发·配置·nuxt.js·构建·钩子
Smileyqp沛沛2 天前
前端项目支持tailwindcss写样式
前端·tailwindcss
Amd7942 天前
Nuxt.js 应用中的 webpackConfigs 事件钩子
webpack·配置·模块·nuxt.js·插件·输出·钩子