淘先锋技术网

首页 1 2 3 4 5 6 7

Tailwind CSS 是一个功能类优先的 CSS 框架,它集成了诸如 flexpt-4text-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代码的程序员来说真的是一大福音