淘先锋技术网

首页 1 2 3 4 5 6 7

超简单！怎样在Vue2中使用TailWind Css

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计。

第一步：使用vue create创建项目

vue create myapp

注意看这时默认的样式

第二步：安装tailwind css

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

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

第三步：创建配置文件

# 创建一个空的tainwind css配置文件
npx tailwindcss init
# or
# 你也可以创建一个包含有所有默认配置的文件（东西太多了，不推荐）
npx tailwindcss init -fill

   这是一个最小的配置文件，你可以在这个文件里面定制你的Tainwind css ，如果你不想定制，直接保持默认的就好

// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'], // 在低版本里面这个字段有可能叫 purge,需要自己区分下
  darkMode: false, // or 'media' or 'class'
  mode: 'jit', // 是否开启jit模式，开启以后编译会更快，当然，tailwindcss版本需要在2.1以上
  theme: {
    extend: {
        // 样式定制示例
        // 当我们在标签里加上 <div class="mx-10"></div>
        // 就相当于写了 margin-left:10px;margin-right: 10px;
        spacing:{
            10: '10px'
        }
    },
  },
  variants: {},
  plugins: [],
}

接下来创建postcss文件或者直接编辑vue.config.js文件

两种方法效果完全一样

方式一：使用postcss文件

在项目根目录下创建postcss.config.js文件，在新版本中，我们运行 npx tailwindcss init 的时候可能已经创建好了

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

 方式二: 编辑vue.config.js文件(个人更推荐)

有时候即使在项目下加了postcss.config.js,项目也不会生效，此时我们可以采取第二种方式

首先，我们删掉程序 自动创建的 postcss.config.js 文件，打开vue.config.js(如果没有的话我们自己创建一个)

// vue.config.js
module.exports = {
    // 加入以下代码
    css: {
        loaderOptions: {
            postcss: {
                plugins: [require('tailwindcss') require('autoprefixer')]
            }
        }
    },
}

第四步：在main.js中引入tainwind css

直接在main.js中加入下面这一行

import "tailwindcss/tailwind.css"

 

做完上面这些步骤，你回到项目，会发现页面的样式发生了变化，别担心，这是因为tailwind css 给我们的项目添加了一些默认样式 

开始使用

想让图片重新回到中间？只需要给img 加上inline-block这个类名即可

<!-- src/app.vue --> 
<img class="inline-block" alt="Vue logo" src="./assets/logo.png">

接下类，我们让Welcome to Your Vue.js App这句加上点颜色，同时改变它的大小

<!-- src/components/HelloWorld.vue -->    
<h1 class="font-semibold text-4xl text-purple-700">{{ msg }}</h1>

结语

tailwind css 极大地简化了响应式代码的编写，默认了一些很好看的样式class，对于不喜欢写css代码的程序员来说真的是一大福音