1、先创建 vue 项目
vue create tailwind
2、创建完后，添加 tailwind css
# Using npm
npm install tailwindcss
# Using Yarn
yarn add tailwindcss
3、创建 css 文件
./assets/css/tailwind.css
4、添加 tailwind.css 内容
@tailwind base;
@tailwind components;
@tailwind utilities;
5、初始化 tailwind css
npx tailwind init
7、在根目录下创建 postcss.config.js
8、安装 postcss-purgecss
# Using npm
npm install @fullhuman/postcss-purgecss --save-dev
# Using yarn
yarn add @fullhuman/postcss-purgecss -D
9、配置 postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [ './src/**/*.html', './src/**/*.vue', './src/**/*.jsx', // etc. ],
// Include any special characters you're using in this regular expression
defaultExtractor:content => content.match(/[\w-/:]+(?<!:)/g) || [] })
module.exports = { plugins: [ require('tailwindcss'), require('autoprefixer'), ...process.env.NODE_ENV === 'production' ? [purgecss] : [] ] }
Done!!!!
可以在 vue 下使用 tailwindcss 了。
