mini program tailwind
1.5.6
Deixe seu miniprograma usar o CSS original do Tailwind/Windi
Da Digital Creative, uma empresa de pesquisa, design e desenvolvimento de produtos digitais localizada em Xangai.
Conheça-nos
- O que fazemos
- Sobre nós
- Contate-nos
Recomenda-se a leitura do documento independente para uma melhor experiência de leitura
Como o miniaplicativo em si não suporta alguns caracteres de escape especiais (como [ ! . etc.) contidos nos nomes dos seletores gerados pelo Tailwind/Windi CSS, isso impede que você use alguns recursos que devem ser usados ao desenvolver o miniaplicativo. A sintaxe flexível e a função de inferência automática de valores/valores arbitrários usada em aplicativos da web, como w-[30px] translate-x-1/2 !bg-[#ff0000] , etc. Isto tem, sem dúvida, um impacto considerável na nossa eficiência de desenvolvimento e na nossa carga mental.
Para superar essa limitação, desenvolvemos este plug-in para ajudá-lo a manter uma experiência de desenvolvimento altamente consistente com o desenvolvimento de aplicativos da web ao usar Tailwind/Windi CSS para desenvolver pequenos programas. Você não precisa mais prestar atenção em quais strings não são. usado em vez de suportar o problema de ter que alterar o método de escrita, continue a escrever seu estilo de miniprograma de acordo com a sintaxe oficial do Tailwind/Windi CSS , e o trabalho de compatibilidade por trás dele será tratado silenciosamente por este plug-in.
Além disso, este plug-in também integra a função de conversão automática de valores rpx . Esta função pode converter automaticamente rem e px que escrevemos no arquivo de configuração CSS do Tailwind/Windi e o código-fonte em valores da unidade rpx no arquivo de estilo final gerado. Isso permite que os desenvolvedores reutilizem a mesma configuração de tema usada em projetos web e permite que pequenos programas continuem a usar os recursos trazidos pelo pixel responsivo.
Saiba mais sobre como este plugin funciona
Deixe seu miniprograma usar o CSS original do Tailwind/Windi
Escolha um dos tipos de miniprogramas adequados para você instalar o plug-in
MPX, uma estrutura aprimorada de miniaplicativos entre terminais com excelente experiência de desenvolvimento e otimização profunda de desempenho.
Como a estrutura MPX é uma estrutura típica de desenvolvimento de miniprograma aprimorado usando Webpack como ferramenta de construção, esta demonstração de instalação usa o projeto MPX como um caso típico para demonstrar como instalar plug-ins para a maioria dos projetos de miniprogramas semelhantes ao Webpack. As etapas de instalação a seguir são amplamente aplicáveis em projetos Webpack . Para a maioria dos projetos de miniprogramas Webpack, você só precisa consultar as mesmas etapas para instalação.
npm i windicss-webpack-plugin -DConsulte a documentação oficial do Windi CSS para mais detalhes
Integração Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -DUsando o plugin Webpack
//webpack.base.conf.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )
module . exports = {
plugins : [
new WindiCSSWebpackPlugin ( ) ,
new MiniProgramTailwindWebpackPlugin ( {
// options
} )
]
} Crie um novo arquivo de configuração windi.config.js no diretório raiz do projeto
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 将 .mpx 文件纳入范围（其余 Webpack 类小程序根据项目本身的文件后缀酌情设置）
include : [ 'src/**/*.{css,html,mpx}' ] ,
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}O arquivo de configuração CSS do Tailwind também se aplica aqui
Consulte a documentação oficial do Windi CSS para mais detalhes
Regras de compatibilidade de perfil Windi CSS
// app.mpx
< style src =" windi.css " > </ style >Para outros miniaplicativos Webpack de projetos não MPX, você pode consultar um método semelhante para introduzir
windi.cssno arquivo de entrada, como:// main.js import 'windi.css'Consulte a documentação oficial do Windi CSS para mais detalhes
Apresente arquivos de estilo Windi CSS
Começar a aproveitar a experiência de desenvolvimento eficiente trazida pelo Windi CSS em projetos de miniprogramas?
| nome | tipo | padrão | descrever |
|---|---|---|---|
| habilitarRpx | Booleano | true | Se deve ativar a conversão automática para valor unitário rpx |
| largura do projeto | Número | 350 | O valor da largura em pixels do rascunho do projeto. Este tamanho afetará a taxa de cálculo durante o processo de conversão de rpx. |
| utilitáriosSettings.spaceBetweenItems | Array<string> | [] | O nome do componente filho no contêiner que usa utilitários Space Between. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.divideItems | Array<string> | [] | O nome do componente filho no contêiner que usa os utilitários Divide width. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
Case de Integração: Projeto MPX
Taro, uma solução de desenvolvimento unificado multiterminal
Este plug-in contém o plug-in Taro, que pode ser facilmente adaptado ao miniaplicativo Taro por meio de "instalação com um clique".
O plug-in Taro é compatível com as seguintes estruturas front-end
- Reagir
- Vista 2
- Vista 3
- Pré-agir
Também é compatível com o uso de CSS Tailwind/Windi no desenvolvimento de componentes nativos mistos.
npm i @dcasia/mini-program-tailwind-webpack-plugin -D
// config/index.js
const config = {
plugins : [
[ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
// ...options
} ]
]
} Crie um novo arquivo de configuração windi.config.js no diretório raiz do projeto
// windi.config.js
export default {
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}O arquivo de configuração CSS do Tailwind também se aplica aqui
Consulte a documentação oficial do Windi CSS para mais detalhes
Regras de compatibilidade de perfil Windi CSS
// app.js
import 'windi.css' ; Começar a aproveitar a experiência de desenvolvimento eficiente trazida pelo Windi CSS no Taro?
| nome | tipo | padrão | descrever |
|---|---|---|---|
| habilitarWindiCSS | Booleano | true | Se deve ativar o Windi CSS que vem com o plug-in |
| windiCSSConfigFile | Corda | Leia o arquivo de configuração no diretório raiz do projeto | Defina manualmente o caminho para o arquivo de configuração Windi CSS, se necessário |
| habilitarRpx | Booleano | false | Se deseja ativar a conversão automática para valor unitário rpx (como o Taro vem com esta função, ela está desativada por padrão) |
| largura do projeto | Número | 375 | O valor da largura em pixels do rascunho do projeto. Este tamanho afetará a taxa de cálculo durante o processo de conversão de rpx. |
| utilitáriosSettings.spaceBetweenItems | Array<string> | [] | O nome do componente filho no contêiner que usa utilitários Space Between. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.divideItems | Array<string> | [] | O nome do componente filho no contêiner que usa os utilitários Divide width. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.customComponents | Array<string> | [] | Os desenvolvedores que usam Uno CSS como motor Atomic CSS precisam configurá-lo de acordo com a situação do projeto. Por padrão, todos os nomes de componentes que acompanham os miniprogramas são incluídos, portanto, na maioria dos casos, os desenvolvedores não precisam configurar este item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| ativarDebugLog | Booleano | false | Se deve ativar a impressão do log interno de execução deste plug-in |
- Caso de integração: Projeto Taro - React
- Caso de integração: Projeto Taro - Vue 2
- Caso de integração: Projeto Taro - Vue 3
uni-app, desenvolva uma vez e cubra vários terminais.
Este artigo contém duas demonstrações de instalação do Vue 3 e Vue 2 do uni-app.
Consulte o próximo tipo de miniprograma: miniprograma Vite regular (tomando uni-app como exemplo)
npm i windicss-webpack-plugin -DConsulte a documentação oficial do Windi CSS para mais detalhes
Integração Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Crie um novo arquivo de configuração vue.config.js no diretório raiz do projeto e use o plug-in Webpack
// vue.config.js
const WindiCSSWebpackPlugin = require ( "windicss-webpack-plugin" ) ;
const MiniProgramTailwindWebpackPlugin = require ( "@dcasia/mini-program-tailwind-webpack-plugin" )
module . exports = {
configureWebpack : {
plugins : [
new WindiCSSWebpackPlugin ( ) ,
new MiniProgramTailwindWebpackPlugin ( {
// options
} )
]
}
} Crie um novo arquivo de configuração windi.config.js no diretório raiz do projeto
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}O arquivo de configuração CSS do Tailwind também se aplica aqui
Consulte a documentação oficial do Windi CSS para mais detalhes
Regras de compatibilidade de perfil Windi CSS
// main.js
import 'windi.css' Começar a aproveitar a experiência de desenvolvimento eficiente trazida pelo Windi CSS em projetos de miniprogramas?
| nome | tipo | padrão | descrever |
|---|---|---|---|
| habilitarRpx | Booleano | true | Se deve ativar a conversão automática para valor unitário rpx |
| largura do projeto | Número | 350 | O valor da largura em pixels do rascunho do projeto. Este tamanho afetará a taxa de cálculo durante o processo de conversão de rpx. |
| utilitáriosSettings.spaceBetweenItems | Array<string> | [] | O nome do componente filho no contêiner que usa utilitários Space Between. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.divideItems | Array<string> | [] | O nome do componente filho no contêiner que usa os utilitários Divide width. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.customComponents | Array<string> | [] | Os desenvolvedores que usam Uno CSS como motor Atomic CSS precisam configurá-lo de acordo com a situação do projeto. Por padrão, todos os nomes de componentes que acompanham os miniprogramas são incluídos, portanto, na maioria dos casos, os desenvolvedores não precisam configurar este item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
Caso de integração: projeto uni-app Vue 2
uni-app, desenvolva uma vez e cubra vários terminais.
Como o projeto é construído com base no Vite ao usar o Vue 3 para desenvolvimento de miniprogramas em uni-app, esta demonstração de instalação usa o projeto uni-app Vue 3 como um caso típico para demonstrar como conectar a maioria dos projetos de miniprogramas semelhantes ao Vite Instalar. As etapas de instalação a seguir são amplamente aplicáveis aos projetos Vite . Para a maioria dos projetos de miniaplicativos semelhantes ao Vite, você só precisa consultar as mesmas etapas para instalação.
npm i vite-plugin-windicss windicss -DConsulte a documentação oficial do Windi CSS para mais detalhes
Integração Windi CSS Vite
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Use plug-ins no arquivo de configuração vite.config.js
// vite.config.js
import WindiCSS from 'vite-plugin-windicss' ;
import MiniProgramTailwind from '@dcasia/mini-program-tailwind-webpack-plugin/rollup' ;
export default {
plugins : [
WindiCSS ( ) ,
MiniProgramTailwind ( )
]
} Crie um novo arquivo de configuração windi.config.js no diretório raiz do projeto
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}O arquivo de configuração CSS do Tailwind também se aplica aqui
Consulte a documentação oficial do Windi CSS para mais detalhes
Regras de compatibilidade de perfil Windi CSS
// main.js
import 'virtual:windi.css' Começar a aproveitar a experiência de desenvolvimento eficiente trazida pelo Windi CSS em projetos de miniprogramas?
| nome | tipo | padrão | descrever |
|---|---|---|---|
| habilitarRpx | Booleano | true | Se deve ativar a conversão automática para valor unitário rpx |
| largura do projeto | Número | 350 | O valor da largura em pixels do rascunho do projeto. Este tamanho afetará a taxa de cálculo durante o processo de conversão de rpx. |
| utilitáriosSettings.spaceBetweenItems | Array<string> | [] | O nome do componente filho no contêiner que usa utilitários Space Between. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.divideItems | Array<string> | [] | O nome do componente filho no contêiner que usa os utilitários Divide width. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.customComponents | Array<string> | [] | Os desenvolvedores que usam Uno CSS como motor Atomic CSS precisam configurá-lo de acordo com a situação do projeto. Por padrão, todos os nomes de componentes que acompanham os miniprogramas são incluídos, portanto, na maioria dos casos, os desenvolvedores não precisam configurar este item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
Caso de integração: projeto uni-app Vue 3
Não importa em qual bundler ou ferramenta de fluxo de trabalho seu projeto seja desenvolvido, desde que haja um serviço programável de monitoramento e processamento de arquivos, você pode personalizá-lo. Mas uma coisa que precisa ficar clara aqui é que se quisermos integrar as funções deste plug-in com base no modo de desenvolvimento nativo, devemos iniciar um conjunto de serviços programáveis de monitoramento e processamento de arquivos como base para o plug-in. A operação deste serviço geralmente é fornecida por ferramentas de terceiros configuradas, como Webpack e Gulp.
Desenvolvedores que usam Tailwind/Windi CSS CLI, por favor leiam
Se você desenvolver UI de pequeno programa por meio da CLI oficial do Tailwind/Windi CSS, infelizmente, porque a CLI não suporta o mecanismo de plug-in e não pode suportar a modificação de arquivos de modelo, não podemos personalizá-lo nesta base.
Desacoplamos e empacotamos as funções principais deste plug-in no arquivo universal-handler.js . Se desejar integrar as funções principais deste plug-in em uma ferramenta de construção personalizada, você pode introduzir universal-handler no fluxo de trabalho. lógica:
const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )Modelo de processo:
const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )Estilo de processamento:
const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )Você pode então retornar as strings processadas ao fluxo de trabalho original para gerar o arquivo final.
Saiba mais sobre os detalhes práticos da implementação personalizada
Mini programa integra implementação personalizada de Windi CSS
| nome | tipo | padrão | descrever |
|---|---|---|---|
| habilitarRpx | Booleano | false | Se deve ativar a conversão automática para valor unitário rpx |
| largura do projeto | Número | 350 | O valor da largura em pixels do rascunho do projeto. Este tamanho afetará a taxa de cálculo durante o processo de conversão de rpx. |
| utilitáriosSettings.spaceBetweenItems | Array<string> | [] | O nome do componente filho no contêiner que usa utilitários Space Between. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.divideItems | Array<string> | [] | O nome do componente filho no contêiner que usa os utilitários Divide width. Quatro componentes comuns, visualização, botão, texto e imagem, são incluídos por padrão, portanto, na maioria dos casos, os desenvolvedores não precisam configurar esse item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
| utilitáriosSettings.customComponents | Array<string> | [] | Os desenvolvedores que usam Uno CSS como motor Atomic CSS precisam configurá-lo de acordo com a situação do projeto. Por padrão, todos os nomes de componentes que acompanham os miniprogramas são incluídos, portanto, na maioria dos casos, os desenvolvedores não precisam configurar este item. Se precisar adicionar novos componentes, você pode adicionar novos nomes de componentes na matriz. |
Caso de integração: implementação customizada baseada em Gulp
As etapas de demonstração levam a integração do Windi CSS como exemplo (Windi CSS tem uma experiência melhor e é compatível com Tailwind CSS)
Saiba mais sobre Windi CSS
Vento CSS
Para permitir que os estilos dos componentes sejam afetados pelos produtos CSS do Tailwind/Windi no miniprograma, precisamos definir o escopo de estilo styleIsolation no arquivo de configuração JSON de cada componente. Caso contrário, mesmo que o CSS do Tailwind/Windi funcione normalmente, ele não poderá. ser usado.
O miniaplicativo Taro não é afetado por esta restrição
{
"component" : true ,
"styleIsolation" : " apply-shared "
}Questões relacionadas
Edição nº 1
Como a função atual de hot reload das ferramentas de desenvolvedor do WeChat não pode detectar alterações no conteúdo do arquivo wxss importado por @import no arquivo de estilo, quando a função hot reload estiver habilitada para desenvolvimento, o simulador não seguirá suas alterações no Tailwind/Windi CSS Atualize a IU com base nas alterações. No momento, os funcionários do WeChat estão cientes da existência desse bug. Antes que o bug seja corrigido, recomendamos que você desligue o recarregamento a quente durante o desenvolvimento e use a atualização automática tradicional da página para visualizar cada atualização da IU. Atualmente, esse problema foi corrigido nas Ferramentas de desenvolvedor do WeChat 1.06.2205231 RC.
Questões relacionadas
Edição nº 3
Para a declaração de classes de estilo externo externalClasses no applet nativo, o plug-in suporta apenas a declaração do nome externalClasses como 'class' e não suporta outros nomes.
Component ( {
externalClasses : [ 'class' ]
} )Questões relacionadas
Edição nº 44
| gramática | Não use este plug-in | Use este plug-in |
|---|---|---|
Regular : h-10 text-white | ✅ | ✅ |
Valores arbitrários/inferência de valor : t-[25px] bg-[#ffffff] | ✅ | |
Fração : translate-x-1/2 w-8.5 | ✅ | |
Importante : !p-1 | ✅ | |
Inferência de valor RGB : text-[rgb(25,25,25)] | ✅ | |
Espaço entre : space-y-2 space-y-reverse | ✅ | |
Largura da divisão : divide-x-2 divide-y-reverse | ✅ | |
Variantes : dark:bg-gray-800 | ✅ | |
Grupos de variantes : hover:(bg-gray-400 font-medium) | ✅ | |
Responsivo : md:p-2 | ✅ | |
Seletor universal : * | ✅ | |
valor rpx transformado de valor rem e px | ✅ |
>= 4.0.0>= 3.4.0>= 2.7.5
