在Vue.js中使用Tailwind

本文介绍了如何设置Tailwind以在Vue CLI 3项目中使用

尾风是一个非常酷的CSS框架。

在这篇文章中,我将向您展示如何在Vue应用程序上使用Tailwind(v1.0.5)。

这是4个简单的步骤:

In this post I assume the project you want to use Tailwind on is based on Vue CLI 3.

安装Tailwind

第一步是使用npm或yarn安装Tailwind:

# Using npm
npm install tailwindcss --save-dev

# Using Yarn yarn add tailwindcss --dev

创建一个配置文件

接下来,使用提供的Tailwind命令创建配置文件。

./node_modules/.bin/tailwind init tailwind.js

这将创建一个tailwind.js项目根目录中的文件,添加基本的Tailwind配置。该文件很长,我不会在这里粘贴它,但是它包含许多预设,这些预设以后将非常有用。

配置PostCSS

现在您需要调整的CSS配置以确保Tailwind运行。添加:

module.exports = {
  "plugins": [
    require('tailwindcss')('tailwind.js'),
    require('autoprefixer')(),
  ]
}

给你postcss.config.js。如果不存在,请创建一个。

注意:如果您将Vue CLI设置为将配置存储在package.json,请确保该文件中没有PostCSS配置。默认情况下,Vue CLI添加以下行:

  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },

删除它们, 或者postcss.config.js文件将不会被读取。

创建一个CSS文件

现在在中创建一个CSS文件src/assets/css/tailwind.css并添加

@tailwind base;
@tailwind components;
@tailwind utilities;

将文件导入您的Vue应用

在main.js中导入tailwind:

import '@/assets/css/tailwind.css'

@指向src/

而已!现在,重新启动您的Vue CLI项目,它应该都能正常工作。

测试工作正常

除非添加特定于Tailwind的类,否则您什么都不会注意到。

例如,尝试将以下HTML添加到您的模板之一中:

<div class="bg-purple text-white sm:bg-green md:bg-blue md:text-yellow lg:bg-red xl:bg-orange ...">
  Test
</div>

那应该创建一个彩色的盒子。

免费下载我的Vue手册


更多vue教程: