在Vue.js中使用Tailwind

Tailwind is a pretty cool CSS framework.

Tailwind是一个非常酷CSS框架。

In this post I’m going to show you how to use Tailwind (v1.0.5) on a Vue app.

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

It’s 4 simple steps:

这是4个简单的步骤：

• Install Tailwind

  安装Tailwind

• Create a configuration file

  创建一个配置文件

• Configure PostCSS

  配置PostCSS

• Create a CSS file

  创建一个CSS文件

• Import the file in your Vue app

  将文件导入Vue应用

• Testing it works fine

  测试工作正常

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

在本文中，我假设要在其上使用Tailwind的项目基于Vue CLI 3。

安装Tailwind (Install Tailwind)

First step is to install Tailwind, using npm or yarn:

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

# Using npm
npm install tailwindcss --save-dev

# Using Yarn
yarn add tailwindcss --dev

创建一个配置文件 (Create a configuration file)

Next, use the Tailwind command that is provided to create a configuration file.

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

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

This will create a tailwind.js file in the root of your project, adding the basic Tailwind configuration. The file is very long, and I won’t paste it here, but it contains lots of presets that will be very useful later.

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

配置PostCSS (Configure PostCSS)

Now you need to tweak the PostCSS configuration to make sure Tailwind runs. Add:

现在，您需要调整PostCSS配置，以确保Tailwind运行。 加：

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

to your postcss.config.js. Create one if it does not exist.

到您的postcss.config.js 。 如果不存在，请创建一个。

Note: if you set Vue CLI to store the configuration in package.json, make sure no PostCSS configuration lies in that file. By default Vue CLI adds these lines:

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

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

remove them, or the postcss.config.js file won’t be read.

删除它们 ，否则将不会读取postcss.config.js文件。

创建一个CSS文件 (Create a CSS file)

Now create a CSS file in src/assets/css/tailwind.css and add

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

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

将文件导入Vue应用 (Import the file in your Vue app)

Import tailwind in main.js:

在main.js中导入tailwind：

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

(@ in vue points to src/)

( @在vue中指向src/ )

That’s it! Now restart your Vue CLI project and it should all work fine.

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

测试工作正常 (Testing it works fine)

You won’t notice anything unless you add Tailwind-specific classes.

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

Try for example adding this HTML in one of your templates:

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

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

That should create a colored box.

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

翻译自: https://flaviocopes.com/vue-tailwind/