tailwindcss的认识和使用

安装 tailwindcss 、postcss、autoprefixer的npm包

项目根目录创建tailwind.config.js文件，文件内容如下：

  /** @type {import('tailwindcss').Config} */
  export default {
    content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
    theme: {
      extend: {},
    },
    plugins: [
      {
        tailwindcss: {},
        autoprefixer: {},
        ...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
      },
    ],
  };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

项目根目录创建postcss.config.js，内容如下：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  };

1
2
3
4
5
6
7

项目入口文件里引入：

import "tailwindcss/tailwind.css"; 即可

helenNote

Choose mode

tailwindcss的认识和使用

tailwindcss的认识和使用

# 对于tailwindcss的使用

# tailwind学习参考资料