tailwindcss

默认主题

github

vscode 设置

插件

• bradlc.vscode-tailwindcss: autocomplete, syntax highlighting, and linting

• omkarbhede.tailwindcss-tune: 右键单击并切换类名

setting.json

{

  "files.associations": {
    "*.css": "tailwindcss"
  },
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "css.format.enable": false,
  "css.validate": false
}

配套npm插件

• prettier-plugin-tailwindcss: 格式化 tailwindcss 类名

// prettier.config.ts
{
  plugins: ['prettier-plugin-tailwindcss'],
  tailwindStylesheet: './src/assets/tailwindcss.css', // v4 入口文件
}

使用

important

<div class="bg-teal-500 bg-red-500!">
  <!-- ... -->
</div>

Generated CSS

.bg-red-500\! {
  background-color: var(--color-red-500) !important;
}

.bg-teal-500 {
  background-color: var(--color-teal-500);
}

@import 'tailwindcss' important;

生成的所有的 utility classes 都有 !important 后缀