mini program tailwind
1.5.6
Deje que su mini programa use el CSS Tailwind/Windi original
De Digital Creative, una empresa de investigación, diseño y desarrollo de productos digitales ubicada en Shanghai.
Conócenos
- que hacemos
- Sobre nosotros
- Contáctenos
Se recomienda leer el documento independiente para una mejor experiencia de lectura.
Dado que el subprograma en sí no admite algunos caracteres de escape especiales (como [ ! . etc.) contenidos en los nombres de los selectores generados por Tailwind/Windi CSS, esto le impide utilizar algunas características que deberían usarse al desarrollar el subprograma La sintaxis flexible y la función de autoinferencia de valores/valores arbitrarios que se utilizan en aplicaciones web, como w-[30px] translate-x-1/2 !bg-[#ff0000] , etc. Sin duda, esto tiene un impacto considerable en nuestra eficiencia de desarrollo y carga mental.
Para superar esta limitación, desarrollamos este complemento para ayudarlo a mantener una experiencia de desarrollo altamente consistente en el desarrollo de aplicaciones web cuando usa Tailwind/Windi CSS para desarrollar programas pequeños. Ya no necesita prestar atención a qué cadenas no lo son. usado En lugar de soportar el problema de tener que cambiar el método de escritura, continúe escribiendo el estilo de su mini programa de acuerdo con la sintaxis oficial de Tailwind/Windi CSS , y este complemento maneja silenciosamente el trabajo de compatibilidad detrás de él.
Además, este complemento también integra la función de conversión automática de valores rpx . Esta función puede convertir automáticamente rem y px que escribimos en el archivo de configuración CSS de Tailwind/Windi y el código fuente en valores de unidad rpx en el archivo de estilo final generado. Esto permite a los desarrolladores reutilizar la misma configuración de tema utilizada en proyectos web y permite que los programas pequeños continúen usando las funciones que ofrece el píxel responsivo.
Obtenga más información sobre cómo funciona este complemento
Deje que su mini programa use el CSS Tailwind/Windi original
Elija uno de los mini tipos de programas que más le convengan para instalar el complemento
MPX, un marco de subprograma entre terminales mejorado con excelente experiencia de desarrollo y optimización profunda del rendimiento.
Dado que el marco MPX es un marco de desarrollo de miniprogramas mejorado típico que utiliza Webpack como herramienta de construcción, esta demostración de instalación utiliza el proyecto MPX como un caso típico para demostrar cómo instalar complementos para la mayoría de los proyectos de miniprogramas similares a Webpack. Los siguientes pasos de instalación son ampliamente aplicables en proyectos Webpack . Para la mayoría de los proyectos de miniprogramas Webpack, solo necesita seguir los mismos pasos para la instalación.
npm i windicss-webpack-plugin -DConsulte la documentación oficial de Windi CSS para obtener más detalles.
Integración del paquete web Windi CSS
npm i @dcasia/mini-program-tailwind-webpack-plugin -DUsando el complemento 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
} )
]
} Cree un nuevo archivo de configuración windi.config.js en el directorio raíz del proyecto
//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
}
}El archivo de configuración CSS de Tailwind también se aplica aquí
Consulte la documentación oficial de Windi CSS para obtener más detalles.
Reglas de compatibilidad del perfil Windi CSS
// app.mpx
< style src =" windi.css " > </ style >Para otros subprogramas Webpack de proyectos que no son MPX, puede consultar un método similar para introducir
windi.cssen el archivo de entrada, como por ejemplo:// main.js import 'windi.css'Consulte la documentación oficial de Windi CSS para obtener más detalles.
Introducir archivos de estilo CSS de Windi
¿Empezar a disfrutar de la experiencia de desarrollo eficiente que brinda Windi CSS en proyectos de mini programas?
| nombre | tipo | por defecto | describir |
|---|---|---|---|
| habilitarRpx | booleano | true | Si se debe habilitar la conversión automática al valor unitario rpx |
| diseñoAncho | Número | 350 | El valor del ancho de píxel del borrador del diseño. Este tamaño afectará la relación de cálculo durante el proceso de conversión de rpx. |
| utilidadesSettings.spaceBetweenItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de espacio entre. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.divideItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de ancho de división. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
Caso de integración: Proyecto MPX
Taro, una solución de desarrollo unificado multiterminal
Este complemento contiene el complemento Taro, que se puede adaptar fácilmente al subprograma Taro mediante la "instalación con un solo clic".
El complemento Taro es compatible con los siguientes marcos de front-end
- Reaccionar
- Vista 2
- Vista 3
- Preact
También es compatible con el uso de Tailwind/Windi CSS en el desarrollo de componentes nativos mixtos.
npm i @dcasia/mini-program-tailwind-webpack-plugin -D
// config/index.js
const config = {
plugins : [
[ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
// ...options
} ]
]
} Cree un nuevo archivo de configuración windi.config.js en el directorio raíz del proyecto
// windi.config.js
export default {
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}El archivo de configuración CSS de Tailwind también se aplica aquí
Consulte la documentación oficial de Windi CSS para obtener más detalles.
Reglas de compatibilidad del perfil Windi CSS
// app.js
import 'windi.css' ; ¿Empezar a disfrutar de la experiencia de desarrollo eficiente que brinda Windi CSS en Taro?
| nombre | tipo | por defecto | describir |
|---|---|---|---|
| habilitarWindiCSS | booleano | true | Si se debe habilitar Windi CSS que viene con el complemento |
| windiCSSConfigFile | Cadena | Lea el archivo de configuración en el directorio raíz del proyecto | Establezca manualmente la ruta al archivo de configuración CSS de Windi si es necesario |
| habilitarRpx | booleano | false | Si se debe habilitar la conversión automática al valor unitario rpx (dado que Taro viene con esta función, está desactivada de forma predeterminada) |
| diseñoAncho | Número | 375 | El valor del ancho de píxel del borrador del diseño. Este tamaño afectará la relación de cálculo durante el proceso de conversión de rpx. |
| utilidadesSettings.spaceBetweenItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de espacio entre. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.divideItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de ancho de división. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.componentes personalizados | Array<string> | [] | Los desarrolladores que utilizan Uno CSS como motor Atomic CSS deben configurarlo de acuerdo con la situación del proyecto. De forma predeterminada, se incluyen todos los nombres de los componentes que vienen con los miniprogramas, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| habilitarDebugLog | Booleano | false | Si se debe habilitar la impresión del registro de ejecución interno de este complemento |
- Caso de integración: Taro - Proyecto React
- Caso de integración: Taro - Proyecto Vue 2
- Caso de integración: Taro - Proyecto Vue 3
uni-app, desarrolla una vez y cubre múltiples terminales.
Este artículo contiene dos demostraciones de instalación de Vue 3 y Vue 2 de uni-app.
Consulte el siguiente tipo de miniprograma: miniprograma Vite normal (tomando uni-app como ejemplo)
npm i windicss-webpack-plugin -DConsulte la documentación oficial de Windi CSS para obtener más detalles.
Integración del paquete web Windi CSS
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Cree un nuevo archivo de configuración vue.config.js en el directorio raíz del proyecto y use el complemento 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
} )
]
}
} Cree un nuevo archivo de configuración windi.config.js en el directorio raíz del proyecto
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}El archivo de configuración CSS de Tailwind también se aplica aquí
Consulte la documentación oficial de Windi CSS para obtener más detalles.
Reglas de compatibilidad del perfil Windi CSS
// main.js
import 'windi.css' ¿Empezar a disfrutar de la experiencia de desarrollo eficiente que brinda Windi CSS en proyectos de mini programas?
| nombre | tipo | por defecto | describir |
|---|---|---|---|
| habilitarRpx | booleano | true | Si se debe habilitar la conversión automática al valor unitario rpx |
| diseñoAncho | Número | 350 | El valor del ancho de píxel del borrador del diseño. Este tamaño afectará la relación de cálculo durante el proceso de conversión de rpx. |
| utilidadesSettings.spaceBetweenItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de espacio entre. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.divideItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de ancho de división. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.componentes personalizados | Array<string> | [] | Los desarrolladores que utilizan Uno CSS como motor Atomic CSS deben configurarlo de acuerdo con la situación del proyecto. De forma predeterminada, se incluyen todos los nombres de los componentes que vienen con los miniprogramas, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
Caso de integración: proyecto uni-app Vue 2
uni-app, desarrolla una vez y cubre múltiples terminales.
Dado que el proyecto se basa en Vite cuando se usa Vue 3 para el desarrollo de miniprogramas en uni-app, esta demostración de instalación utiliza el proyecto uni-app Vue 3 como un caso típico para demostrar cómo conectar la mayoría de los proyectos de miniprogramas similares a Vite. . Instalar. Los siguientes pasos de instalación son ampliamente aplicables a los proyectos de Vite . Para la mayoría de los proyectos de subprogramas similares a Vite, solo necesita seguir los mismos pasos para la instalación.
npm i vite-plugin-windicss windicss -DConsulte la documentación oficial de Windi CSS para obtener más detalles.
Integración de Windi CSS Vite
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Utilice complementos en el archivo de configuración 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 ( )
]
} Cree un nuevo archivo de configuración windi.config.js en el directorio raíz del proyecto
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}El archivo de configuración CSS de Tailwind también se aplica aquí
Consulte la documentación oficial de Windi CSS para obtener más detalles.
Reglas de compatibilidad del perfil Windi CSS
// main.js
import 'virtual:windi.css' ¿Empezar a disfrutar de la experiencia de desarrollo eficiente que brinda Windi CSS en proyectos de mini programas?
| nombre | tipo | por defecto | describir |
|---|---|---|---|
| habilitarRpx | booleano | true | Si se debe habilitar la conversión automática al valor unitario rpx |
| diseñoAncho | Número | 350 | El valor del ancho de píxel del borrador del diseño. Este tamaño afectará la relación de cálculo durante el proceso de conversión de rpx. |
| utilidadesSettings.spaceBetweenItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de espacio entre. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.divideItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de ancho de división. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.componentes personalizados | Array<string> | [] | Los desarrolladores que utilizan Uno CSS como motor Atomic CSS deben configurarlo de acuerdo con la situación del proyecto. De forma predeterminada, se incluyen todos los nombres de los componentes que vienen con los miniprogramas, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
Caso de integración: proyecto uni-app Vue 3
No importa en qué paquete o herramienta de flujo de trabajo se desarrolle su proyecto, siempre que haya un servicio de procesamiento y monitoreo de archivos programable, puede personalizarlo. Pero una cosa que debe quedar clara aquí es que si queremos integrar las funciones de este complemento según el modo de desarrollo nativo, debemos iniciar un conjunto de servicios de procesamiento y monitoreo de archivos programables como base para el complemento. El funcionamiento de este servicio generalmente lo proporcionan las herramientas de terceros configuradas, como Webpack y Gulp.
Los desarrolladores que utilizan Tailwind/Windi CSS CLI deben leer
Si desarrolla una interfaz de usuario de programa pequeño a través de la CLI oficial de Tailwind/Windi CSS, desafortunadamente, debido a que la CLI no admite el mecanismo de complemento y no puede admitir la modificación de archivos de plantilla, no podemos personalizarlo sobre esta base.
Hemos desacoplado y empaquetado las funciones principales de este complemento en el archivo universal-handler.js . Si desea integrar las funciones principales de este complemento en una herramienta de compilación personalizada, puede introducir universal-handler en el flujo de trabajo. lógica:
const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )Plantilla de proceso:
const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )Estilo de procesamiento:
const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )Luego puede devolver las cadenas procesadas al flujo de trabajo original para generar el archivo final.
Obtenga más información sobre los detalles prácticos de la implementación personalizada
Mini programa integra implementación personalizada de Windi CSS
| nombre | tipo | por defecto | describir |
|---|---|---|---|
| habilitarRpx | booleano | false | Si se debe habilitar la conversión automática al valor unitario rpx |
| diseñoAncho | Número | 350 | El valor del ancho de píxel del borrador del diseño. Este tamaño afectará la relación de cálculo durante el proceso de conversión de rpx. |
| utilidadesSettings.spaceBetweenItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de espacio entre. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.divideItems | Array<string> | [] | El nombre del componente secundario en el contenedor que utiliza las utilidades de ancho de división. De forma predeterminada se incluyen cuatro componentes comunes: vista, botón, texto e imagen, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
| utilidadesConfiguración.componentes personalizados | Array<string> | [] | Los desarrolladores que utilizan Uno CSS como motor Atomic CSS deben configurarlo de acuerdo con la situación del proyecto. De forma predeterminada, se incluyen todos los nombres de los componentes que vienen con los miniprogramas, por lo que en la mayoría de los casos los desarrolladores no necesitan configurar este elemento. Si necesita agregar nuevos componentes, puede agregar nuevos nombres de componentes en la matriz. |
Caso de integración: implementación personalizada basada en Gulp
Los pasos de demostración toman como ejemplo la integración de Windi CSS (Windi CSS tiene una mejor experiencia y es compatible con Tailwind CSS)
Más información sobre Windi CSS
CSS de viento
Para permitir que los estilos de los componentes se vean afectados por los productos CSS de Tailwind/Windi en el mini programa, debemos establecer el alcance del estilo styleIsolation en el archivo de configuración JSON de cada componente. De lo contrario, incluso si Tailwind/Windi CSS funciona normalmente, no puede funcionar. Desarrollar la interfaz de usuario del componente.
El subprograma Taro no se ve afectado por esta restricción.
{
"component" : true ,
"styleIsolation" : " apply-shared "
}Problemas relacionados
Número 1
Dado que la función de recarga en caliente actual de las herramientas de desarrollo de WeChat no puede detectar cambios en el contenido del archivo wxss importado por @import en el archivo de estilo, cuando la función de recarga en caliente está habilitada para el desarrollo, el simulador no seguirá sus cambios en Tailwind/Windi. CSS Actualice la interfaz de usuario según los cambios. En la actualidad, los funcionarios de WeChat son conscientes de la existencia de este error. Antes de solucionarlo, le recomendamos que desactive la recarga en caliente durante el desarrollo y utilice la actualización automática tradicional de la página para obtener una vista previa de cada actualización de la interfaz de usuario. Actualmente, este problema se ha solucionado en WeChat Developer Tools 1.06.2205231 RC.
Problemas relacionados
Número 3
Para la declaración de clases de estilo externo externalClasses en un subprograma nativo, el complemento solo admite la declaración del nombre externalClasses como 'class' y no admite otros nombres.
Component ( {
externalClasses : [ 'class' ]
} )Problemas relacionados
Número 44
| gramática | No utilices este complemento | Utilice este complemento |
|---|---|---|
Regular : h-10 text-white | ✅ | ✅ |
Valores arbitrarios/inferencia de valores : t-[25px] bg-[#ffffff] | ✅ | |
Fracción : translate-x-1/2 w-8.5 | ✅ | |
Importante : !p-1 | ✅ | |
Inferencia de valor RGB : text-[rgb(25,25,25)] | ✅ | |
Espacio entre : space-y-2 space-y-reverse | ✅ | |
Ancho de división : divide-x-2 divide-y-reverse | ✅ | |
Variantes : dark:bg-gray-800 | ✅ | |
Grupos de variantes : hover:(bg-gray-400 font-medium) | ✅ | |
Responsivo : md:p-2 | ✅ | |
Selector universal : * | ✅ | |
valor rpx transformado del valor rem y px | ✅ |
>= 4.0.0>= 3.4.0>= 2.7.5
