Tailwindcss 3在Vite的配置方法

pnpm i -D autoprefixer postcss prettier-plugin-tailwindcss tailwindcss

tailwind.config.js的content

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

vite.config.js:

import tailwindcss from 'tailwindcss'
import autoprefixer from 'autoprefixer'
...
export default defineConfig({
  ...,
  css: {
   postcss: {
    plugins: [tailwindcss, autoprefixer(), ...]
   }
  }
})

@/assets/styles/tailwindcss.css:

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

main.js:

import '@/assets/styles/tailwindcss.css';

.prettierrc:

{
  "singleQuote": true,
  "printWidth": 135,
  "plugins": [
    "prettier-plugin-tailwindcss"
  ]
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容