tailwind css的使用准备工作。

安装

npm install -D tailwindcss

npx tailwindcss init

npm install -D tailwindcss postcss autoprefixer postcss-import prettier-plugin-tailwindcss prettier

npx tailwindcss init

// Make sure to add code blocks to your code group

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

// 其他 css

样式自动排序

使用 prettier 并且在 vscode 的 setting.josn 中设置

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

  // prettier 配置
  "prettier.printWidth": 80, // prettier 宽度
  "prettier.singleQuote": true, // prettier 可以单引号
  "prettier.semi": false, // prettier 设置语句末尾不加分号
  "prettier.trailingComma": "none", // prettier 去掉最后一个逗号
  // prettier 配置结束

使用 prettier-plugin-tailwindcss 的确定是会自动将标签中的属性换行！！！

scope

在 vue style scoped 定义样式。 参考链接 (opens new window)

<style lang="postcss" scoped>
.button {
  @apply border border-green-500 bg-green-500 text-white rounded-md px-4 py-2 m-2;
}
</style>