原生头条小程序使用 TailWindCSS
以下内容由使用
weapp-tailwindcss
的热心网友提供,十分感谢!
创建项目
创建项目 test-miniapp
, 进入项目目录并初始化 package.json
cd test-miniapp
npm init -y
新建小程序开发目录 src
,对应的小程序代码,生成目标代码目录为 dist
此时目录结构如下所示:
test-miniapp
-- src
-- dist
-- package.json
安装 gulp 及插件
- 本地安装
gulp
npm i -D gulp
- 安装 gulp 模块及插件
npm i -D gulp gulp-postcss gulp-plumber del@^6
安装与配置 tailwindcss
- 安装 tailwindcss
npm i -D tailwindcss postcss autoprefixer
- 初始化 tailwindcss 配置文件
npx tailwindcss init
- 创建
postcss.config.js
并注册tailwindcss
module.exports = {
plugins: {
tailwindcss: {},
// 假如框架已经内置了 `autoprefixer`,可以去除下一行
autoprefixer: {},
}
}
- 配置
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
// 不在 content 包括的文件内的 class,不会生成对应的 css 工具类
content: ['./src/**/*.{ttml,js}'],
theme: {
extend: {},
},
plugins: [],
}
- 代码引入
tailwindcss
,打开src/app.ttss
@tailwind base;
@tailwind components;
@tailwind utilities;
配置 vscode 插件
Prettier - Code formatter
安装插件
npm i -D prettier prettier-plugin-tailwindcss
配置 prettier.config.js
module.exports = {
// 行尾加分号
semi: false,
// 使用单引号
singleQuote: true,
// 配置文件类型
overrides: [
{
files: '*.ttml',
options: { parser: 'html' },
},
{
files: '*.ttss',
options: { parser: 'css' },
},
],
plugins: ['prettier-plugin-tailwindcss'],
}
将小程序的文件包括进来,设置:首选项->工作区->设置->扩展->Prettier->Prettier: Document Selectors
**/*.ttml
**/*.ttss
- 字节小程序开发助手(微信小程序是这个:WXML - Language Service)
Tailwind CSS IntelliSense
并配置:首选项->工作区->设置->扩展->Tailwind CSS IntelliSense->Tailwind CSS: Include Languages
项:ttml,值:html