mini program tailwind
1.5.6
Laissez votre mini-programme utiliser le CSS Tailwind/Windi original
De Digital Creative, une société de recherche, de conception et de développement de produits numériques située à Shanghai.
Apprenez à nous connaître
- Ce que nous faisons
- À propos de nous
- Contactez-nous
Il est recommandé de lire le document indépendant pour une meilleure expérience de lecture
Étant donné que l'applet elle-même ne prend pas en charge certains caractères d'échappement spéciaux (tels que [ ! . etc.) contenus dans les noms de sélecteur générés par Tailwind/Windi CSS, cela vous empêche d'utiliser certaines fonctionnalités qui devraient être utilisées lors du développement de l'applet. applet. La syntaxe flexible et la fonction d'inférence automatique de valeurs/valeurs arbitraires utilisées dans les applications Web, telles que w-[30px] translate-x-1/2 !bg-[#ff0000] , etc. Cela a sans aucun doute un impact considérable sur notre efficacité de développement et notre charge mentale.
Afin de surmonter cette limitation, nous avons développé ce plug-in pour vous aider à maintenir une expérience de développement très cohérente avec le développement d'applications Web lorsque vous utilisez Tailwind/Windi CSS pour développer de petits programmes. Vous n'avez plus besoin de faire attention aux chaînes qui ne le sont pas. utilisé. Au lieu de supporter le problème de devoir changer de méthode d'écriture, continuez à écrire votre style de mini-programme selon la syntaxe officielle de Tailwind/Windi CSS , et le travail de compatibilité derrière celui-ci est géré en silence par ce plug-in.
De plus, ce plugin intègre également la fonction de conversion automatique des valeurs rpx . Cette fonction peut convertir automatiquement rem et px que nous avons écrites dans le fichier de configuration CSS Tailwind/Windi et le code source en valeurs unitaires rpx dans le fichier de style final généré. Cela permet aux développeurs de réutiliser la même configuration de thème utilisée dans les projets Web et permet aux petits programmes de continuer à utiliser les fonctionnalités apportées par le pixel réactif.
En savoir plus sur le fonctionnement de ce plugin
Laissez votre mini-programme utiliser le CSS Tailwind/Windi original
Choisissez l'un des types de mini-programmes qui vous convient pour installer le plug-in
MPX, un framework d'applets multi-terminaux amélioré avec une excellente expérience de développement et une optimisation approfondie des performances.
Étant donné que le framework MPX est un framework de développement de mini-programmes amélioré typique utilisant Webpack comme outil de construction, cette démonstration d'installation utilise le projet MPX comme cas typique pour montrer comment installer des plug-ins pour la plupart des projets de mini-programmes de type Webpack. Les étapes d'installation suivantes sont largement applicables dans les projets Webpack . Pour la plupart des projets de mini-programmes Webpack, il vous suffit de vous référer aux mêmes étapes pour l'installation.
npm i windicss-webpack-plugin -DReportez-vous à la documentation officielle de Windi CSS pour plus de détails
Intégration Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -DUtiliser le 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
} )
]
} Créez un nouveau fichier de configuration windi.config.js dans le répertoire racine du projet
//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
}
}Le fichier de configuration CSS Tailwind s'applique également ici
Reportez-vous à la documentation officielle de Windi CSS pour plus de détails
Règles de compatibilité des profils Windi CSS
// app.mpx
< style src =" windi.css " > </ style >Pour les autres applets Webpack de projets non-MPX, vous pouvez vous référer à une méthode similaire pour introduire
windi.cssdans le fichier d'entrée, telle que :// main.js import 'windi.css'Reportez-vous à la documentation officielle de Windi CSS pour plus de détails
Introduire les fichiers de style CSS Windi
Commencez à profiter de l'expérience de développement efficace apportée par Windi CSS dans les mini-projets de programme ?
| nom | taper | défaut | décrire |
|---|---|---|---|
| activerRpx | Booléen | true | S'il faut activer la conversion automatique en valeur unitaire rpx |
| conceptionLargeur | Nombre | 350 | La valeur de largeur de pixel du brouillon de conception. Cette taille affectera le rapport de calcul lors du processus de conversion rpx. |
| utilitySettings.spaceBetweenItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Space Between. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.divideItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Divide width. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
Cas d'intégration : projet MPX
Taro, une solution de développement unifiée multi-terminaux
Ce plug-in contient le plug-in Taro, qui peut être facilement adapté à l'applet Taro grâce à une "installation en un clic".
Le plug-in Taro est compatible avec les frameworks front-end suivants
- Réagir
- Vue 2
- Vue 3
- Préagir
Il est également compatible avec l’utilisation de Tailwind/Windi CSS dans le développement de composants natifs mixtes.
npm i @dcasia/mini-program-tailwind-webpack-plugin -D
// config/index.js
const config = {
plugins : [
[ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
// ...options
} ]
]
} Créez un nouveau fichier de configuration windi.config.js dans le répertoire racine du projet
// windi.config.js
export default {
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}Le fichier de configuration CSS Tailwind s'applique également ici
Reportez-vous à la documentation officielle de Windi CSS pour plus de détails
Règles de compatibilité des profils Windi CSS
// app.js
import 'windi.css' ; Commencez à profiter de l'expérience de développement efficace apportée par Windi CSS dans Taro ?
| nom | taper | défaut | décrire |
|---|---|---|---|
| activerWindiCSS | Booléen | true | S'il faut activer Windi CSS fourni avec le plug-in |
| WindiCSSConfigFichier | Chaîne | Lire le fichier de configuration dans le répertoire racine du projet | Définir manuellement le chemin d'accès au fichier de configuration Windi CSS si nécessaire |
| activerRpx | Booléen | false | S'il faut activer la conversion automatique en valeur unitaire rpx (puisque Taro est livré avec cette fonction, elle est désactivée par défaut) |
| conceptionLargeur | Nombre | 375 | La valeur de largeur de pixel du brouillon de conception. Cette taille affectera le rapport de calcul lors du processus de conversion rpx. |
| utilitySettings.spaceBetweenItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Space Between. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.divideItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Divide width. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.customComponents | Array<string> | [] | Les développeurs qui utilisent Uno CSS comme moteur Atomic CSS doivent le configurer en fonction de la situation du projet. Par défaut, tous les noms de composants fournis avec les mini-programmes sont inclus, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| activerDebugLog | Booléen | false | S'il faut activer l'impression du journal d'exécution interne de ce plug-in |
- Cas d'intégration : Taro - Projet React
- Cas d'intégration : projet Taro - Vue 2
- Cas d'intégration : Projet Taro - Vue 3
uni-app, développez une seule fois et couvrez plusieurs terminaux.
Cet article contient deux démonstrations d'installation de Vue 3 et Vue 2 d'uni-app.
Veuillez vous référer au type de mini-programme suivant : mini-programme Vite régulier (en prenant uni-app comme exemple)
npm i windicss-webpack-plugin -DReportez-vous à la documentation officielle de Windi CSS pour plus de détails
Intégration Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Créez un nouveau fichier de configuration vue.config.js dans le répertoire racine du projet et utilisez le 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
} )
]
}
} Créez un nouveau fichier de configuration windi.config.js dans le répertoire racine du projet
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}Le fichier de configuration CSS Tailwind s'applique également ici
Reportez-vous à la documentation officielle de Windi CSS pour plus de détails
Règles de compatibilité des profils Windi CSS
// main.js
import 'windi.css' Commencez à profiter de l'expérience de développement efficace apportée par Windi CSS dans les mini-projets de programme ?
| nom | taper | défaut | décrire |
|---|---|---|---|
| activerRpx | Booléen | true | S'il faut activer la conversion automatique en valeur unitaire rpx |
| conceptionLargeur | Nombre | 350 | La valeur de largeur de pixel du brouillon de conception. Cette taille affectera le rapport de calcul lors du processus de conversion rpx. |
| utilitySettings.spaceBetweenItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Space Between. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.divideItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Divide width. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.customComponents | Array<string> | [] | Les développeurs qui utilisent Uno CSS comme moteur Atomic CSS doivent le configurer en fonction de la situation du projet. Par défaut, tous les noms de composants fournis avec les mini-programmes sont inclus, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
Cas d'intégration : projet uni-app Vue 2
uni-app, développez une seule fois et couvrez plusieurs terminaux.
Étant donné que le projet est construit sur la base de Vite lors de l'utilisation de Vue 3 pour le développement de mini-programmes dans uni-app, cette démonstration d'installation utilise le projet uni-app Vue 3 comme cas typique pour montrer comment brancher la plupart des projets de mini-programmes de type Vite. . Installer. Les étapes d'installation suivantes sont largement applicables aux projets Vite . Pour la plupart des projets d'applets de type Vite, il vous suffit de vous référer aux mêmes étapes pour l'installation.
npm i vite-plugin-windicss windicss -DReportez-vous à la documentation officielle de Windi CSS pour plus de détails
Intégration Windi CSS Vite
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Utiliser les plugins dans le fichier de configuration 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 ( )
]
} Créez un nouveau fichier de configuration windi.config.js dans le répertoire racine du projet
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}Le fichier de configuration CSS Tailwind s'applique également ici
Reportez-vous à la documentation officielle de Windi CSS pour plus de détails
Règles de compatibilité des profils Windi CSS
// main.js
import 'virtual:windi.css' Commencez à profiter de l'expérience de développement efficace apportée par Windi CSS dans les mini-projets de programme ?
| nom | taper | défaut | décrire |
|---|---|---|---|
| activerRpx | Booléen | true | S'il faut activer la conversion automatique en valeur unitaire rpx |
| conceptionLargeur | Nombre | 350 | La valeur de largeur de pixel du brouillon de conception. Cette taille affectera le rapport de calcul lors du processus de conversion rpx. |
| utilitySettings.spaceBetweenItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Space Between. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.divideItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Divide width. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.customComponents | Array<string> | [] | Les développeurs qui utilisent Uno CSS comme moteur Atomic CSS doivent le configurer en fonction de la situation du projet. Par défaut, tous les noms de composants fournis avec les mini-programmes sont inclus, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
Cas d'intégration : projet uni-app Vue 3
Quel que soit le bundler ou l'outil de workflow sur lequel votre projet est développé, tant qu'il existe un service programmable de surveillance et de traitement des fichiers, vous pouvez le personnaliser. Mais une chose qui doit être claire ici est que si nous voulons intégrer les fonctions de ce plug-in sur la base du mode de développement natif, nous devons démarrer un ensemble de services programmables de surveillance et de traitement de fichiers comme base du plug-in. Fonctionnement de . Ce service est généralement fourni par Les outils tiers configurés tels que Webpack et Gulp sont terminés.
Développeurs utilisant Tailwind/Windi CSS CLI, veuillez lire
Si vous développez une interface utilisateur de petit programme via la CLI officielle de Tailwind/Windi CSS, malheureusement, comme la CLI ne prend pas en charge le mécanisme du plug-in et ne peut pas prendre en charge la modification des fichiers modèles, nous ne pouvons pas la personnaliser sur cette base.
Nous avons découplé et regroupé les fonctions principales de ce plug-in dans le fichier universal-handler.js . Si vous souhaitez intégrer les fonctions principales de ce plug-in dans un outil de construction personnalisé, vous pouvez introduire universal-handler dans le flux de travail. logique:
const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )Modèle de processus :
const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )Style de traitement :
const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )Vous pouvez ensuite renvoyer les chaînes traitées au flux de travail d'origine pour générer le fichier final.
En savoir plus sur les détails pratiques de la mise en œuvre personnalisée
Le mini programme intègre une implémentation personnalisée de Windi CSS
| nom | taper | défaut | décrire |
|---|---|---|---|
| activerRpx | Booléen | false | S'il faut activer la conversion automatique en valeur unitaire rpx |
| conceptionLargeur | Nombre | 350 | La valeur de largeur de pixel du brouillon de conception. Cette taille affectera le rapport de calcul lors du processus de conversion rpx. |
| utilitySettings.spaceBetweenItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Space Between. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.divideItems | Array<string> | [] | Nom du composant enfant dans le conteneur qui utilise les utilitaires Divide width. Quatre composants courants, vue, bouton, texte et image, sont inclus par défaut, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
| utilitySettings.customComponents | Array<string> | [] | Les développeurs qui utilisent Uno CSS comme moteur Atomic CSS doivent le configurer en fonction de la situation du projet. Par défaut, tous les noms de composants fournis avec les mini-programmes sont inclus, donc dans la plupart des cas, les développeurs n'ont pas besoin de configurer cet élément. Si vous devez ajouter de nouveaux composants, vous pouvez ajouter de nouveaux noms de composants dans le tableau. |
Cas d'intégration : implémentation personnalisée basée sur Gulp
Les étapes de démonstration prennent comme exemple l'intégration de Windi CSS (Windi CSS a une meilleure expérience et est compatible avec Tailwind CSS)
En savoir plus sur Windi CSS
Vent CSS
Afin de permettre aux styles de composants d'être affectés par les produits CSS de Tailwind/Windi dans le mini-programme, nous devons définir la portée de style styleIsolation dans le fichier de configuration JSON de chaque composant. Sinon, même si Tailwind/Windi CSS fonctionne normalement, il ne peut pas le faire. être utilisé. Développer l’interface utilisateur du composant.
L'applet Taro n'est pas concernée par cette restriction
{
"component" : true ,
"styleIsolation" : " apply-shared "
}Problèmes liés
Problème n°1
Étant donné que la fonction de rechargement à chaud actuelle des outils de développement WeChat ne peut pas détecter les modifications dans le contenu du fichier wxss importé par @import dans le fichier de style, lorsque la fonction de rechargement à chaud est activée pour le développement, le simulateur ne suivra pas vos modifications apportées à Tailwind/Windi. CSS. Mettez à jour l'interface utilisateur en fonction des modifications. À l'heure actuelle, les responsables de WeChat sont conscients de l'existence de ce bug. Avant que le bug ne soit corrigé, nous vous recommandons de désactiver le rechargement à chaud pendant le développement et d'utiliser l'actualisation automatique traditionnelle des pages pour prévisualiser chaque mise à jour de l'interface utilisateur. Actuellement, ce problème a été résolu dans WeChat Developer Tools 1.06.2205231 RC.
Problèmes liés
Problème n°3
Pour la déclaration des classes de style externes externalClasses dans l'applet natif, le plug-in prend uniquement en charge la déclaration du nom externalClasses en tant que 'class' et ne prend pas en charge les autres noms.
Component ( {
externalClasses : [ 'class' ]
} )Problèmes liés
Numéro 44
| grammaire | N'utilisez pas ce plug-in | Utilisez ce plug-in |
|---|---|---|
Regular : h-10 text-white | ✅ | ✅ |
Valeurs arbitraires/Valeur inférée : t-[25px] bg-[#ffffff] | ✅ | |
Fraction : translate-x-1/2 w-8.5 | ✅ | |
Important : !p-1 | ✅ | |
Déduire la valeur RVB : text-[rgb(25,25,25)] | ✅ | |
Espace entre : space-y-2 space-y-reverse | ✅ | |
Largeur de division : divide-x-2 divide-y-reverse | ✅ | |
Variantes : dark:bg-gray-800 | ✅ | |
Groupes de variantes : hover:(bg-gray-400 font-medium) | ✅ | |
Réactif : md:p-2 | ✅ | |
Sélecteur universel : * | ✅ | |
valeur rpx transformée à partir des valeurs rem et px | ✅ |
>= 4.0.0>= 3.4.0>= 2.7.5
