weapp-tailwindcss：文档链接

id="CLIuniapp_9">一、CLI创建uniapp

id="_24">三、初始化

• 初始化TailwindCss、postcss，生成tailwind.config.js、postcss.config.js

tailwind.config.js

配置需要扫描的文件类型--即src下的所有vue、js、ts文件

content

string">'./public/index.html'

class="token

string">'./src/**/*.{html,js,ts,vue}'

class="token

string">'gray-dark'

class="token

string">'gray-light'

class="token

string">'purple-pink'

class="token

string">'blue-light'

class="token

class="btn-primary">点击我</button>

punctuation">}

class="token

function">addComponents

class="token

string">'.btn-primary'

class="token

string">'&:hover'

class="token

punctuation">}

postcss.config.js

punctuation">}

id="TailwindCss_95">四、引用TailwindCss

在uniapp的App.vue文件：

language-css"><style>

class="token

punctuation">;

class="token

punctuation">;

class="token

id="weapptailwindcss_108">五、安装weapp-tailwindcss

注意：如果tailwindcss

patch

patch

在package.json文件:

string">"postinstall"

class="token

punctuation">}

id="_126">六、注册插件

在vite.config.ts文件:

string">"@dcloudio/vite-plugin-uni"

class="token

UnifiedViteWeappTailwindcssPlugin

string">'weapp-tailwindcss/vite'

class="token

function">defineConfig

class="token

string">'tailwindcss'

class="token

string">'autoprefixer'

class="token

punctuation">;

id="TailwindCss_153">七、使用TailwindCss

operator"><template

class="token

string">"@/static/logo.png"

string">"text-green"

class="token

string">"text-blue"

class="token

string">"text-orange"

class="token

operator">>typescript

class="token

string">"text-purple-pink"

class="token

operator">>tailwindcss4

class="token

string">"btn-primary"

class="token

operator">/template

class="token

operator">>

src="https://i-blog.csdnimg.cn/direct/be333b0bc82840898498a3816363ab39.png">

---