mini program tailwind Download - mini program tailwind Quellcode herunterladen

mini program tailwind

AI-Quellcode

1.5.6

Herunterladen

wechat-mp-plugin

Mini-Programm Tailwind Webpack Plugin

Lassen Sie Ihr Miniprogramm das ursprüngliche Tailwind/Windi-CSS verwenden

Von Digital Creative, einem Unternehmen für digitale Produktforschung, Design und Entwicklung mit Sitz in Shanghai.
Lernen Sie uns kennen
Was wir tun
Über uns
Kontaktieren Sie uns

Für ein besseres Leseerlebnis wird empfohlen, das unabhängige Dokument zu lesen ♥️

einführen

Da das Applet selbst einige spezielle Escape-Zeichen (z. B. [ ! . usw.), die in den von Tailwind/Windi CSS generierten Selektornamen enthalten sind, nicht unterstützt, können Sie einige Funktionen nicht verwenden, die bei der Entwicklung des Applets verwendet werden sollten Applet. Die flexible Syntax und die Auto-Infer-Funktion für beliebige Werte/Werte, die in Webanwendungen wie w-[30px] translate-x-1/2 !bg-[#ff0000] usw. verwendet wird. Dies hat zweifellos erhebliche Auswirkungen auf unsere Entwicklungseffizienz und psychische Belastung.

Um diese Einschränkung zu überwinden, haben wir dieses Plug-in entwickelt, um Ihnen bei der Entwicklung kleiner Programme mit Tailwind/Windi CSS eine äußerst konsistente Entwicklungserfahrung zu ermöglichen. Sie müssen nicht mehr darauf achten, welche Zeichenfolgen nicht vorhanden sind Anstatt das Problem zu unterstützen, die Schreibmethode ändern zu müssen, schreiben Sie Ihren Miniprogrammstil weiterhin gemäß der offiziellen Syntax von Tailwind/Windi CSS , und die dahinter stehende Kompatibilitätsarbeit wird von diesem Plug-In stillschweigend erledigt.

Darüber hinaus integriert dieses Plug-in auch die Funktion der automatischen Konvertierung von rpx Werten. Diese Funktion kann rem und px Einheitenwerte, die wir in der Tailwind/Windi-CSS-Konfigurationsdatei und im Quellcode geschrieben haben, automatisch in rpx Einheitswerte in der endgültig generierten Stildatei konvertieren. Dies ermöglicht Entwicklern die Wiederverwendung derselben Designkonfiguration, die in Webprojekten verwendet wurde, und ermöglicht es kleinen Programmen, weiterhin die Funktionen von Responsive Pixel zu nutzen.

Erfahren Sie mehr über die Funktionsweise dieses Plugins
Lassen Sie Ihr Miniprogramm das ursprüngliche Tailwind/Windi-CSS verwenden

Schnellstart

Wählen Sie für die Installation des Plug-ins einen der für Sie passenden Miniprogrammtypen aus

Reguläre Webpack-Applets (am Beispiel von MPX)

MPX, ein erweitertes terminalübergreifendes Applet-Framework mit hervorragender Entwicklungserfahrung und umfassender Leistungsoptimierung.

Da das MPX-Framework ein typisches erweitertes Miniprogramm-Entwicklungsframework ist, das Webpack als Konstruktionstool verwendet, verwendet diese Installationsdemonstration das MPX-Projekt als typischen Fall, um zu demonstrieren, wie Plug-Ins für die meisten Webpack-ähnlichen Miniprogrammprojekte installiert werden. Die folgenden Installationsschritte sind in Webpack-Projekten weit verbreitet . Bei den meisten Webpack-Miniprogrammprojekten müssen Sie sich bei der Installation nur auf dieselben Schritte beziehen.

Installieren Sie das windicss-webpack-plugin

npm i windicss-webpack-plugin -D

Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Windi CSS Webpack-Integration

Installieren Sie @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Webpack-Konfigurationsdatei aktualisieren

Verwendung des Webpack-Plugins

 //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
    } )
  ]
}

Erstellen Sie eine neue Windi-CSS-Konfigurationsdatei

Erstellen Sie eine neue windi.config.js Konfigurationsdatei im Projektstammverzeichnis

 //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
  }
}

Auch hier gilt die CSS-Konfigurationsdatei von Tailwind
Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Kompatibilitätsregeln für Windi-CSS-Profile

Einführung von Windi CSS-Produkten in die Eintragsdatei

// app.mpx
< style src =" windi.css " > </ style >

Für andere Webpack-Applets von Nicht-MPX-Projekten können Sie auf eine ähnliche Methode zurückgreifen, um windi.css in die Eintragsdatei einzuführen, wie zum Beispiel:
 // main.js
import 'windi.css'
Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Einführung von Windi-CSS-Stildateien

Beenden

Genießen Sie die effiziente Entwicklungserfahrung von Windi CSS in Miniprogrammprojekten?

Konfigurierbare Parameter

Name	Typ	Standard	beschreiben
enableRpx	Boolescher Wert	`true`	Ob die automatische Konvertierung in den rpx-Einheitswert aktiviert werden soll
designBreite	Nummer	`350`	Der Pixelbreitenwert des Entwurfsentwurfs. Diese Größe wirkt sich auf das Berechnungsverhältnis während des rpx-Konvertierungsprozesses aus.
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die Space Between-Dienstprogramme verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.divideItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die die Dienstprogramme „Divide width“ verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.

Fall

Integrationsfall: MPX-Projekt

? Taro-Applet

Taro-Applet

Taro, eine einheitliche Entwicklungslösung mit mehreren Terminals

Dieses Plug-in enthält das Taro-Plug-in, das durch „One-Click-Installation“ einfach an das Taro-Applet angepasst werden kann.

Das Taro-Plug-in ist mit den folgenden Front-End-Frameworks kompatibel
Reagieren
Vue 2
Vue 3
Präagieren
Es ist auch mit der Verwendung von Tailwind/Windi CSS bei der Entwicklung gemischter nativer Komponenten kompatibel.

Installieren Sie @dcasia/mini-program-tailwind-webpack-plugin

 npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Verwendung des Taro-Plugins

 // config/index.js
const config = {
  plugins : [
    [ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
      // ...options
    } ]
  ]
}

Erstellen Sie eine neue Windi-CSS-Konfigurationsdatei

Erstellen Sie eine neue windi.config.js Konfigurationsdatei im Projektstammverzeichnis

 // windi.config.js
export default {
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Auch hier gilt die CSS-Konfigurationsdatei von Tailwind
Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Kompatibilitätsregeln für Windi-CSS-Profile

Einführung von Windi CSS-Produkten in die Eintragsdatei

 // app.js
import 'windi.css' ;

Beenden

Genießen Sie die effiziente Entwicklungserfahrung von Windi CSS in Taro?

Konfigurierbare Parameter

Name	Typ	Standard	beschreiben
enableWindiCSS	Boolescher Wert	`true`	Ob Windi CSS aktiviert werden soll, das mit dem Plug-in geliefert wird
windiCSSConfigFile	Zeichenfolge	Lesen Sie die Konfigurationsdatei im Projektstammverzeichnis	Legen Sie den Pfad zur Windi-CSS-Konfigurationsdatei bei Bedarf manuell fest
enableRpx	Boolescher Wert	`false`	Ob die automatische Konvertierung in den rpx-Einheitswert aktiviert werden soll (da Taro mit dieser Funktion ausgestattet ist, ist sie standardmäßig deaktiviert)
designBreite	Nummer	`375`	Der Pixelbreitenwert des Entwurfsentwurfs. Diese Größe wirkt sich auf das Berechnungsverhältnis während des rpx-Konvertierungsprozesses aus.
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die Space Between-Dienstprogramme verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.divideItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die die Dienstprogramme „Divide width“ verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.customComponents	`Array<string>`	`[]`	Entwickler, die Uno CSS als Atomic CSS-Engine verwenden, müssen es entsprechend der Projektsituation konfigurieren. Standardmäßig sind alle Komponentennamen enthalten, die mit Miniprogrammen geliefert werden, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
enableDebugLog	Boolescher Wert	`false`	Ob das Drucken des internen Laufprotokolls dieses Plug-Ins aktiviert werden soll

Fall

Integrationsfall: Taro – React-Projekt
Integrationsfall: Taro – Vue 2-Projekt
Integrationsfall: Taro – Vue 3-Projekt

? Uni-App-Applet

Uni-App-Applet

Uni-App, einmal entwickeln und mehrere Terminals abdecken.

Dieser Artikel enthält zwei Installationsdemonstrationen von Vue 3 und Vue 2 von uni-app.

Demonstration der Installation von Vue 3

Bitte beziehen Sie sich auf den nächsten Miniprogrammtyp: reguläres Vite-Miniprogramm (am Beispiel der Uni-App)

Demonstration der Installation von Vue 2

Installieren Sie das windicss-webpack-plugin

npm i windicss-webpack-plugin -D

Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Windi CSS Webpack-Integration

Installieren Sie @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Erstellen Sie eine neue Vue-Konfigurationsdatei

Erstellen Sie eine neue Konfigurationsdatei vue.config.js im Stammverzeichnis des Projekts und verwenden Sie das Webpack-Plug-in

 // 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
      } )
    ]  
  }  
}

Erstellen Sie eine neue Windi-CSS-Konfigurationsdatei

Erstellen Sie eine neue windi.config.js Konfigurationsdatei im Projektstammverzeichnis

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Auch hier gilt die CSS-Konfigurationsdatei von Tailwind
Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Kompatibilitätsregeln für Windi-CSS-Profile

Einführung von Windi CSS-Produkten in die Eintragsdatei

 // main.js
import 'windi.css'

Beenden

Genießen Sie die effiziente Entwicklungserfahrung von Windi CSS in Miniprogrammprojekten?

Konfigurierbare Parameter

Name	Typ	Standard	beschreiben
enableRpx	Boolescher Wert	`true`	Ob die automatische Konvertierung in den rpx-Einheitswert aktiviert werden soll
designBreite	Nummer	`350`	Der Pixelbreitenwert des Entwurfsentwurfs. Diese Größe wirkt sich auf das Berechnungsverhältnis während des rpx-Konvertierungsprozesses aus.
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die Space Between-Dienstprogramme verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.divideItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die die Dienstprogramme „Divide width“ verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.customComponents	`Array<string>`	`[]`	Entwickler, die Uno CSS als Atomic CSS-Engine verwenden, müssen es entsprechend der Projektsituation konfigurieren. Standardmäßig sind alle Komponentennamen enthalten, die mit Miniprogrammen geliefert werden, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.

Fall

Integrationsfall: Uni-App Vue 2-Projekt

? Reguläre Vite-ähnliche Applets (nehmen Sie Uni-App als Beispiel)

Reguläre Vite-Applets (nehmen Sie Uni-App als Beispiel)

Uni-App, einmal entwickeln und mehrere Terminals abdecken.

Da das Projekt auf Vite basiert, wenn Vue 3 für die Entwicklung von Miniprogrammen in Uni-App verwendet wird, verwendet diese Installationsdemonstration das Uni-App-Vue-3-Projekt als typischen Fall, um zu demonstrieren, wie die meisten Vite-ähnlichen Miniprogrammprojekte eingebunden werden . Installieren. Die folgenden Installationsschritte gelten weitgehend für Vite-Projekte . Bei den meisten Vite-ähnlichen Applet-Projekten müssen Sie zur Installation nur auf dieselben Schritte zurückgreifen.

Installieren Sie vite-plugin-windicss und windicss

npm i vite-plugin-windicss windicss -D

Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Windi CSS Vite-Integration

Installieren Sie @dcasia/mini-program-tailwind-webpack-plugin

npm i @dcasia/mini-program-tailwind-webpack-plugin -D

Vite-Konfigurationsdatei aktualisieren

Verwenden Sie Plugins in der Konfigurationsdatei 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 ( )
  ]
}

Erstellen Sie eine neue Windi-CSS-Konfigurationsdatei

Erstellen Sie eine neue windi.config.js Konfigurationsdatei im Projektstammverzeichnis

 //windi.config.js
export default {
  preflight : false ,
  prefixer : false ,
  extract : {
    // 忽略部分文件夹
    exclude : [ 'node_modules' , '.git' , 'dist' ]
  } ,
  corePlugins : {
    // 禁用掉在小程序环境中不可能用到的 plugins
    container : false
  }
}

Auch hier gilt die CSS-Konfigurationsdatei von Tailwind
Weitere Informationen finden Sie in der offiziellen Dokumentation von Windi CSS
Kompatibilitätsregeln für Windi-CSS-Profile

Einführung von Windi CSS-Produkten in die Eintragsdatei

 // main.js
import 'virtual:windi.css'

Beenden

Genießen Sie die effiziente Entwicklungserfahrung von Windi CSS in Miniprogrammprojekten?

Konfigurierbare Parameter

Name	Typ	Standard	beschreiben
enableRpx	Boolescher Wert	`true`	Ob die automatische Konvertierung in den rpx-Einheitswert aktiviert werden soll
designBreite	Nummer	`350`	Der Pixelbreitenwert des Entwurfsentwurfs. Diese Größe wirkt sich auf das Berechnungsverhältnis während des rpx-Konvertierungsprozesses aus.
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die Space Between-Dienstprogramme verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.divideItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die die Dienstprogramme „Divide width“ verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.customComponents	`Array<string>`	`[]`	Entwickler, die Uno CSS als Atomic CSS-Engine verwenden, müssen es entsprechend der Projektsituation konfigurieren. Standardmäßig sind alle Komponentennamen enthalten, die mit Miniprogrammen geliefert werden, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.

Fall

Integrationsfall: Uni-App Vue 3-Projekt

? Eigenentwickelte oder maßgeschneiderte Applets

Miniprogramme für native Entwicklung oder benutzerdefinierte Build-Tools

Unabhängig davon, auf welchem Bundler oder Workflow-Tool Ihr Projekt entwickelt wird, können Sie es individuell anpassen, solange es einen programmierbaren Dateiüberwachungs- und -verarbeitungsdienst gibt. Hier muss jedoch klargestellt werden, dass wir, wenn wir die Funktionen dieses Plug-Ins basierend auf dem nativen Entwicklungsmodus integrieren möchten, eine Reihe programmierbarer Dateiüberwachungs- und -verarbeitungsdienste als Grundlage für das Plug-In starten müssen. Der Betrieb dieses Dienstes erfolgt normalerweise über konfigurierte Tools von Drittanbietern wie Webpack und Gulp.

Entwickler, die Tailwind/Windi CSS CLI verwenden, lesen bitte
Wenn Sie die Benutzeroberfläche kleiner Programme über die offizielle CLI von Tailwind/Windi CSS entwickeln, können wir dieses Plugin leider nicht anpassen, da die CLI den Plug-In-Mechanismus nicht unterstützt und die Änderung von Vorlagendateien nicht unterstützen kann.

Wir haben die Kernfunktionen dieses Plug-Ins entkoppelt und in die Datei universal-handler.js gepackt. Wenn Sie die Kernfunktionen dieses Plug-Ins in ein benutzerdefiniertes Build-Tool integrieren möchten, können Sie universal-handler in den Workflow einführen Logik:

 const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )

Prozessvorlage:

 const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )

Verarbeitungsstil:

 const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )

Anschließend können Sie die verarbeiteten Zeichenfolgen an den ursprünglichen Workflow zurückgeben, um die endgültige Datei zu generieren.

Erfahren Sie mehr über die praktischen Details der kundenspezifischen Implementierung
Das Miniprogramm integriert eine benutzerdefinierte Implementierung von Windi CSS

Konfigurierbare Parameter

Name	Typ	Standard	beschreiben
enableRpx	Boolescher Wert	`false`	Ob die automatische Konvertierung in den Rpx-Einheitswert aktiviert werden soll
designBreite	Nummer	`350`	Der Pixelbreitenwert des Entwurfsentwurfs. Diese Größe wirkt sich auf das Berechnungsverhältnis während des rpx-Konvertierungsprozesses aus.
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die Space Between-Dienstprogramme verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.divideItems	`Array<string>`	`[]`	Der Name der untergeordneten Komponente im Container, die die Dienstprogramme „Divide width“ verwendet. Vier gängige Komponenten, Ansicht, Schaltfläche, Text und Bild, sind standardmäßig enthalten, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.
utilitiesSettings.customComponents	`Array<string>`	`[]`	Entwickler, die Uno CSS als Atomic CSS-Engine verwenden, müssen es entsprechend der Projektsituation konfigurieren. Standardmäßig sind alle Komponentennamen enthalten, die mit Miniprogrammen geliefert werden, sodass Entwickler dieses Element in den meisten Fällen nicht konfigurieren müssen. Wenn Sie neue Komponenten hinzufügen müssen, können Sie dem Array neue Komponentennamen hinzufügen.

Fall

Integrationsfall: Benutzerdefinierte Implementierung basierend auf Gulp

Die Demonstrationsschritte dienen als Beispiel für die Integration von Windi CSS (Windi CSS bietet eine bessere Erfahrung und ist mit Tailwind CSS kompatibel).
Erfahren Sie mehr über Windi CSS
Wind-CSS

fangen

Damit Komponentenstile von den CSS-Produkten von Tailwind/Windi im Miniprogramm beeinflusst werden können, müssen wir den Stilbereich styleIsolation in der JSON-Konfigurationsdatei jeder Komponente festlegen. Andernfalls funktioniert Tailwind/Windi CSS nicht normal verwendet werden.
Das Taro-Applet ist von dieser Einschränkung nicht betroffen
```
{
  "component" : true ,
  "styleIsolation" : " apply-shared "
}
```
Verwandte Probleme
Problem Nr. 1
Da die aktuelle Hot-Reload-Funktion der WeChat-Entwicklertools Änderungen am Inhalt der von @import in die Style-Datei importierten WXSS-Datei nicht erkennen kann, folgt der Simulator Ihren Änderungen an Tailwind/Windi nicht, wenn die Hot-Reload-Funktion für die Entwicklung aktiviert ist CSS. Aktualisieren Sie die Benutzeroberfläche basierend auf Änderungen. Derzeit sind sich die WeChat-Beamten der Existenz dieses Fehlers bewusst. Bevor der Fehler behoben wird, empfehlen wir Ihnen, das Hot-Reloading während der Entwicklung zu deaktivieren und die herkömmliche automatische Seitenaktualisierung zu verwenden, um eine Vorschau jedes UI-Updates anzuzeigen. Derzeit wurde dieses Problem in WeChat Developer Tools 1.06.2205231 RC behoben.
Verwandte Probleme
Problem Nr. 3
Für die Deklaration externer Stilklassen externalClasses im nativen Applet unterstützt das Plug-in nur die Deklaration externalClasses -Namens als 'class' und keine anderen Namen.
```
 Component ( {
  externalClasses : [ 'class' ]
} )
```
Verwandte Probleme
Ausgabe Nr. 44

Funktionsvergleich

Grammatik	Verwenden Sie dieses Plug-in nicht	Verwenden Sie dieses Plug-in
Normal : `h-10` `text-white`	✅	✅
Beliebige Werte/Wertableitung : `t-[25px]` `bg-[#ffffff]`		✅
Bruch : `translate-x-1/2` `w-8.5`		✅
Wichtig : `!p-1`		✅
RGB-Wertableitung : `text-[rgb(25,25,25)]`		✅
Leerzeichen dazwischen : `space-y-2` `space-y-reverse`		✅
Breite teilen : `divide-x-2` `divide-y-reverse`		✅
Varianten : `dark:bg-gray-800`		✅
Variantengruppen : `hover:(bg-gray-400 font-medium)`		✅
Responsiv : `md:p-2`		✅
Universalwähler : `*`		✅
`rpx` -Wert, transformiert aus `rem` und `px` -Wert		✅

Kompatibilitätsbereich

Webpack >= 4.0.0
Taro >= 3.4.0
MPX >= 2.7.5
Uni-App

Expandieren

Zusätzliche Informationen

Version 1.5.6
Typ AI-Quellcode
Aktualisierungszeit 2025-01-19
Größe 2.45MB
Kommt von Github

Ähnliche Anwendungen

Mini-Farmstay in chinesischer Version

2024-06-28
Mini Mini FarmSpiel

2024-02-22
Dyson Sphere-Programm

2022-08-09
Mini-Schlag

2010-07-10
Mini-Datei-Host

2009-04-28
Mini-Datei-Host

2009-04-28