This article has been translated on the basis of machine translation. If there are any mistakes, please fix it.pull request

Introduce Tailwind CSS to Vite and Vue3

Show how to introduce the CSS framework Tailwind CSS in your Vite project. In addition, explain how to set up Stylelint rules and VSCode for Tailwind CSS.

10/10/20213 min read
..
hero image

Introduction

Vite has a No bundle policy and provides a fast HMR during development. However, the default template with CLI itself is fairly simple, so when you start a Vite project, you'll have to build your own environment to use the other modules.

In this article, I will use Vite to build an environment for Tailwind CSS as CSS framework.

Please refer to here for more details.

In the following, I will assume that there is a Vite project.

Environment building

First, install Tailwind CSS module and generate a configuration file. As you want to use scss and sass, install modules for them as well.

1
2
yarn add -D tailwindcss sass
yarn tailwindcss init
bash

Next, prepare a style file to inject the tailwind directive.

1
2
3
@tailwind base;
@tailwind components;
@tailwind utilities;
src/assets/styles/tailwind.scsscss

Also need a PostCSS configuration file in the project root.

1
2
3
module.exports = {
plugins: [require('tailwindcss'), require('autoprefixer')],
}
postcss.config.jsjs

Finally, import the style file at the entry point.

For example, the path is specified in the path alias. Set the appropriate path.
1
2
3
4
5
6
import { createApp } from 'vue'
import App from '/@/App.vue'
import '/@/assets/styles/main.scss'
import '/@/assets/styles/tailwind.scss'
createApp(App).mount('#app')
src/main.tsts

Now you can use Utility Classes during development.

Improving DX

VSCode allows you to make tailwind's intellisense work. here to install it.

Also, VSCode has unknownAtRules by default as it validates css. To fix it, set the settings.json as follows.

1
2
3
4
{
"scss.validate": false,
"css.validate": false
}
.vscode/settings.jsonjson

If you are using Stylelint, the syntax of @tailwind and @apply, which are specific to tailwind may cause problems with Stylelint rules.

Let's get rid of this.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"rules": {
"at-rule-no-unknown": [
true,
{
"ignoreAtRules": [
"tailwind",
"apply",
"variants",
"responsive",
"screen",
],
},
],
}
}
json

PurgeCSS to optimize your build

If you build tailwind as is, it will also bundle a huge number of Utility Classes that you don't use with it.

Tailwind CSS supports PurgeCSS as standard, so you should configure it to optimize your build.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { join } = require('path')
const BASE_DIR = join(__dirname, 'src')
const VUE_FILE = join('**', '*.vue')
const config = {
future: {
removeDeprecatedGapUtilities: true,
purgeLayersByDefault: true,
},
purge: {
// Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
enabled: process.env.NODE_ENV === 'production',
content: [join(BASE_DIR, VUE_FILE), join(__dirname, '*.html')],
},
theme: {
extend: {},
},
variants: {},
plugins:[],
}
module.exports = config
tailwind.config.jsjs

The reason why CommonJS format is used instead of ES Module format, is because the Tailwind CSS plugin cannot recognize the ES Module format. The reason why it is .js format is also the same.

Now the environment of Tailwind CSS has been created.


Edit this page on GitHub

Other Article

Comments