mini program tailwindダウンロード - mini program tailwindソースコードのダウンロード

mini program tailwind

AI ソースコード

1.5.6

ダウンロード

wechat-mp-プラグイン

ミニプログラム Tailwind Webpack プラグイン

ミニプログラムにオリジナルの Tailwind/Windi CSS を使用させます

上海にあるデジタル製品の研究、設計、開発会社、Digital Creative によるものです。
私たちについて知りましょう
私たちがやっていること
私たちについて
お問い合わせ

より良い読書体験を得るために、独立したドキュメントを読むことをお勧めします♥️

導入

アプレット自体は、Tailwind/Windi CSS によって生成されるセレクター名に含まれる一部の特殊なエスケープ文字 ( [ ! .など) をサポートしていないため、アプレットの開発時に使用する必要がある一部の機能が使用できなくなります。アプレット。 w-[30px] translate-x-1/2 !bg-[#ff0000]など、Web アプリケーションで使用される柔軟な構文と任意の値/値の自動推論機能。これは開発効率や精神的負担に大きな影響を与えることは間違いありません。

この制限を打破するために、Tailwind/Windi CSS を使用して小さなプログラムを開発する際に、Web アプリケーション開発で一貫性の高い開発エクスペリエンスを維持できるようにするために、このプラグインを開発しました。どの文字列がそうでないかを気にする必要がなくなりました。記述方法を変更する必要があるという問題をサポートする代わりに、 Tailwind/Windi CSS の公式構文に従ってミニプログラムスタイルを記述し続け、その背後にある互換性作業はこのプラグインによって自動的に処理されます。

さらに、このプラグインには、 rpx値の自動変換機能も統合されています。この機能は、Tailwind/Windi CSS 設定ファイルとソースコードに記述したremおよびpx単位値を、最終的に生成されるスタイルファイルのrpx単位値に自動的に変換できます。これにより、開発者は Web プロジェクトで使用されているのと同じテーマ構成を再利用でき、小規模なプログラムでもレスポンシブピクセルによってもたらされる機能を引き続き使用できるようになります。

このプラグインの仕組みの詳細についてはこちらをご覧ください
ミニプログラムにオリジナルの Tailwind/Windi CSS を使用させます

クイックスタート

プラグインのインストールに適したミニプログラムタイプを 1 つ選択してください

通常の Webpack アプレット (MPX を例にします)

MPX は、優れた開発経験と徹底的なパフォーマンスの最適化を備えた、強化されたクロスターミナルアプレットフレームワークです。

MPX フレームワークは、構築ツールとして Webpack を使用する典型的な拡張ミニプログラム開発フレームワークであるため、このインストールデモでは、典型的なケースとして MPX プロジェクトを使用して、ほとんどの Webpack に似たミニプログラムプロジェクトにプラグインをインストールする方法を示します。次のインストール手順は、Webpack プロジェクトに広く適用できます。ほとんどの Webpack ミニプログラムプロジェクトでは、同じ手順を参照してインストールするだけです。

Windicss-webpack-plugin をインストールする

npm i windicss-webpack-plugin -D

詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS Webpack の統合

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

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

Webpack 設定ファイルを更新する

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

新しい Windi CSS 構成ファイルを作成する

プロジェクトのルートディレクトリに新しいwindi.config.js構成ファイルを作成します。

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

Tailwind CSS 設定ファイルもここに適用されます
詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS プロファイルの互換性ルール

Windi CSS 製品をエントリファイルに導入する

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

非 MPX プロジェクトの他の Webpack アプレットの場合は、次のような同様の方法を参照して、エントリファイルにwindi.css導入できます。
 // main.js
import 'windi.css'
詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS スタイルファイルの導入

仕上げる

ミニプログラムプロジェクトで Windi CSS によってもたらされる効率的な開発エクスペリエンスを楽しみ始めませんか?

設定可能なパラメータ

名前	タイプ	デフォルト	説明する
イネーブルRpx	ブール値	`true`	rpx単位値への自動変換を有効にするかどうか
デザイン幅	番号	`350`	デザインドラフトのピクセル幅の値は、rpx 変換プロセス中の計算比率に影響します。
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Space Between ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージという 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.divideItems	`Array<string>`	`[]`	幅分割ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。

場合

統合事例: MPX プロジェクト

タロイモアプレット

多端末統合開発ソリューション Taro

このプラグインには Taro プラグインが含まれており、「ワンクリックインストール」を通じて Taro アプレットに簡単に適合させることができます。

Taro プラグインは、次のフロントエンドフレームワークと互換性があります。
反応する
ビュー2
Vue3
プリアクト
また、混合ネイティブコンポーネント開発における Tailwind/Windi CSS の使用とも互換性があります。

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

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

太郎プラグインの使用

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

新しい Windi CSS 構成ファイルを作成する

プロジェクトのルートディレクトリに新しいwindi.config.js構成ファイルを作成します。

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

Tailwind CSS 設定ファイルもここに適用されます
詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS プロファイルの互換性ルール

Windi CSS 製品をエントリファイルに導入する

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

仕上げる

Taro の Windi CSS によってもたらされる効率的な開発エクスペリエンスを楽しみ始めませんか?

設定可能なパラメータ

名前	タイプ	デフォルト	説明する
WindiCSS を有効にする	ブール値	`true`	プラグインに付属の Windi CSS を有効にするかどうか
WindiCSSConfigファイル	弦	プロジェクトのルートディレクトリにある設定ファイルを読み取ります。	必要に応じて、Windi CSS 構成ファイルへのパスを手動で設定します。
イネーブルRpx	ブール値	`false`	rpx単位値への自動変換を有効にするかどうか（Taroにはこの機能が付属しているため、デフォルトでは無効になっています）
デザイン幅	番号	`375`	デザインドラフトのピクセル幅の値は、rpx 変換プロセス中の計算率に影響します。
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Space Between ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.divideItems	`Array<string>`	`[]`	幅分割ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.customComponents	`Array<string>`	`[]`	Uno CSS を Atomic CSS エンジンとして使用する開発者は、プロジェクトの状況に応じて設定する必要があります。デフォルトでは、ミニプログラムに付属するすべてのコンポーネント名が含まれるため、ほとんどの場合、開発者はこの項目を設定する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
デバッグログを有効にする	ブール値	`false`	このプラグインの内部実行ログの印刷を有効にするかどうか

場合

統合事例: Taro - React プロジェクト
統合事例: Taro - Vue 2 プロジェクト
統合事例: Taro - Vue 3 プロジェクト

ユニアプリアプレット

uni-app、一度の開発で複数の端末をカバーします。

この記事には、uni-app の Vue 3 と Vue 2 の 2 つのインストールデモンストレーションが含まれています。

Vue 3 インストールのデモ

次のミニプログラムタイプを参照してください: 通常の Vite ミニプログラム (例として uni-app)

Vue 2 インストールのデモ

Windicss-webpack-plugin をインストールする

npm i windicss-webpack-plugin -D

詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS Webpack の統合

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

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

新しい Vue 構成ファイルを作成する

プロジェクトのルートディレクトリに新しいvue.config.js構成ファイルを作成し、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
      } )
    ]  
  }  
}

新しい Windi CSS 構成ファイルを作成する

プロジェクトのルートディレクトリに新しいwindi.config.js構成ファイルを作成します。

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

Tailwind CSS 設定ファイルもここに適用されます
詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS プロファイルの互換性ルール

Windi CSS 製品をエントリファイルに導入する

 // main.js
import 'windi.css'

仕上げる

ミニプログラムプロジェクトで Windi CSS によってもたらされる効率的な開発エクスペリエンスを楽しみ始めませんか?

設定可能なパラメータ

名前	タイプ	デフォルト	説明する
イネーブルRpx	ブール値	`true`	rpx単位値への自動変換を有効にするかどうか
デザイン幅	番号	`350`	デザインドラフトのピクセル幅の値は、rpx 変換プロセス中の計算率に影響します。
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Space Between ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージという 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.divideItems	`Array<string>`	`[]`	幅分割ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.customComponents	`Array<string>`	`[]`	Uno CSS を Atomic CSS エンジンとして使用する開発者は、プロジェクトの状況に応じて設定する必要があります。デフォルトでは、ミニプログラムに付属するすべてのコンポーネント名が含まれるため、ほとんどの場合、開発者はこの項目を設定する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。

場合

統合ケース: uni-app Vue 2 プロジェクト

? 通常の Vite のようなアプレット (例として uni-app)

通常の Vite アプレット (uni-app を例にします)

uni-app、一度の開発で複数の端末をカバーします。

uni-app でのミニプログラム開発に Vue 3 を使用する場合、プロジェクトは Vite に基づいて構築されるため、このインストールデモでは、典型的なケースとして uni-app Vue 3 プロジェクトを使用して、ほとんどの Vite のようなミニプログラムプロジェクトをプラグインする方法を示します。。インストール。次のインストール手順は、Vite プロジェクトに広く適用できます。ほとんどの Vite 類似のアプレットプロジェクトでは、同じ手順を参照してインストールするだけです。

vite-plugin-windicss と Windicss をインストールする

npm i vite-plugin-windicss windicss -D

詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS Vite の統合

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

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

Vite 設定ファイルを更新する

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

新しい Windi CSS 構成ファイルを作成する

プロジェクトのルートディレクトリに新しいwindi.config.js構成ファイルを作成します。

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

Tailwind CSS 設定ファイルもここに適用されます
詳細については、Windi CSS 公式ドキュメントを参照してください。
Windi CSS プロファイルの互換性ルール

Windi CSS 製品をエントリファイルに導入する

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

仕上げる

ミニプログラムプロジェクトで Windi CSS によってもたらされる効率的な開発エクスペリエンスを楽しみ始めませんか?

設定可能なパラメータ

名前	タイプ	デフォルト	説明する
イネーブルRpx	ブール値	`true`	rpx単位値への自動変換を有効にするかどうか
デザイン幅	番号	`350`	デザインドラフトのピクセル幅の値は、rpx 変換プロセス中の計算率に影響します。
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Space Between ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.divideItems	`Array<string>`	`[]`	幅分割ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージという 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.customComponents	`Array<string>`	`[]`	Uno CSS を Atomic CSS エンジンとして使用する開発者は、プロジェクトの状況に応じて設定する必要があります。デフォルトでは、ミニプログラムに付属するすべてのコンポーネント名が含まれるため、ほとんどの場合、開発者はこの項目を設定する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。

場合

統合ケース: uni-app Vue 3 プロジェクト

? ネイティブ開発またはカスタム構築されたアプレット

ネイティブ開発またはカスタムビルドツール用のミニプログラム

プロジェクトがどのようなバンドラーやワークフローツールで開発されているかに関係なく、プログラム可能なファイル監視および処理サービスがある限り、カスタマイズできます。ただし、ここで明確にする必要があるのは、ネイティブ開発モードに基づいてこのプラグインの機能を統合したい場合は、プラグインの基礎としてプログラム可能なファイル監視および処理サービスのセットを開始する必要があるということです。このサービスは通常、Webpack や Gulp などのサードパーティツールによって提供されます。

Tailwind/Windi CSS CLI を使用する開発者は必ずお読みください。
Tailwind/Windi CSS の公式 CLI を使用して小規模なプログラム UI を開発する場合、残念ながら、CLI はプラグインメカニズムをサポートしておらず、テンプレートファイルの変更をサポートできないため、このプラグインをベースにカスタマイズすることはできません。

このプラグインのコア機能を分離して、 universal-handler.jsファイルにパッケージ化しました。このプラグインのコア機能をカスタムビルドツールに統合したい場合は、 universal-handlerワークフローに導入できます。論理：

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

プロセステンプレート:

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

処理スタイル:

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

その後、処理された文字列を元のワークフローに戻して、最終ファイルを生成できます。

カスタム実装の実践的な詳細について詳しく知る
ミニプログラムは Windi CSS のカスタム実装を統合します

設定可能なパラメータ

名前	タイプ	デフォルト	説明する
イネーブルRpx	ブール値	`false`	rpx単位値への自動変換を有効にするかどうか
デザイン幅	番号	`350`	デザインドラフトのピクセル幅の値は、rpx 変換プロセス中の計算率に影響します。
utilitiesSettings.spaceBetweenItems	`Array<string>`	`[]`	Space Between ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.divideItems	`Array<string>`	`[]`	幅分割ユーティリティを使用するコンテナ内の子コンポーネントの名前。ビュー、ボタン、テキスト、イメージの 4 つの共通コンポーネントがデフォルトで含まれているため、ほとんどの場合、開発者はこの項目を構成する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。
utilitiesSettings.customComponents	`Array<string>`	`[]`	Uno CSS を Atomic CSS エンジンとして使用する開発者は、プロジェクトの状況に応じて設定する必要があります。デフォルトでは、ミニプログラムに付属するすべてのコンポーネント名が含まれるため、ほとんどの場合、開発者はこの項目を設定する必要はありません。新しいコンポーネントを追加する必要がある場合は、配列に新しいコンポーネント名を追加できます。

場合

統合ケース: Gulp に基づくカスタム実装

デモ手順では、例として Windi CSS の統合を取り上げます (Windi CSS はより優れたエクスペリエンスを備えており、Tailwind CSS と互換性があります)。
Windi CSS について詳しく見る
風CSS

トラップ

ミニプログラムでコンポーネントスタイルが Tailwind/Windi の CSS 製品の影響を受けるようにするには、各コンポーネントの JSON 設定ファイルでスタイルスコープstyleIsolation設定する必要があります。そうしないと、Tailwind/Windi CSS が正常に動作しても、それができなくなります。コンポーネントUIを開発します。
Taro アプレットはこの制限の影響を受けません。
```
{
  "component" : true ,
  "styleIsolation" : " apply-shared "
}
```
関連する問題
問題 #1
WeChat 開発者ツールの現在のホットリロード機能は、スタイルファイル内の@importによってインポートされた wxss ファイルの内容の変更を検出できないため、ホットリロード機能が開発用に有効になっている場合、シミュレータは Tailwind/Windi への変更に従いません。 CSS。変更に基づいて UI を更新します。現時点では、WeChat 関係者はこのバグの存在を認識しています。バグが修正される前に、開発中はホットリロードをオフにし、従来の自動ページ更新を使用して各 UI 更新をプレビューすることをお勧めします。現在、この問題は WeChat 開発者ツール 1.06.2205231 RC で修正されています。
関連する問題
問題 #3
ネイティブアプレットでの外部スタイルクラスexternalClassesの宣言の場合、プラグインはexternalClasses名の宣言を'class'としてのみサポートし、他の名前はサポートしません。
```
 Component ( {
  externalClasses : [ 'class' ]
} )
```
関連する問題
第44号

機能比較

文法	このプラグインは使用しないでください	このプラグインを使用する
レギュラー: `h-10` `text-white`	✅	✅
任意の値/値の推測: `t-[25px]` `bg-[#ffffff]`		✅
分数： `translate-x-1/2` `w-8.5`		✅
重要: `!p-1`		✅
RGB値の推論: `text-[rgb(25,25,25)]`		✅
間のスペース: `space-y-2` `space-y-reverse`		✅
分割幅: `divide-x-2` `divide-y-reverse`		✅
バリエーション: `dark:bg-gray-800`		✅
バリアントグループ: `hover:(bg-gray-400 font-medium)`		✅
レスポンシブ: `md:p-2`		✅
ユニバーサルセレクター： `*`		✅
`rem`と`px`値から変換された`rpx`値		✅

互換性範囲

Webpack >= 4.0.0
タロウ>= 3.4.0
MPX >= 2.7.5
ユニアプリ

拡大する

追加情報

バージョン 1.5.6
タイプ AI ソースコード
更新時間 2025-01-19
サイズ 2.45MB
から Github

mini program tailwind

ミニ プログラム Tailwind Webpack プラグイン

導入

クイックスタート

通常の Webpack アプレット (MPX を例にします)

Windicss-webpack-plugin をインストールする

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

Webpack 設定ファイルを更新する

新しい Windi CSS 構成ファイルを作成する

Windi CSS 製品をエントリ ファイルに導入する

仕上げる

設定可能なパラメータ

場合

タロイモアプレット

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

太郎プラグインの使用

新しい Windi CSS 構成ファイルを作成する

Windi CSS 製品をエントリ ファイルに導入する

仕上げる

設定可能なパラメータ

場合

ユニアプリアプレット

Vue 3 インストールのデモ

Vue 2 インストールのデモ

Windicss-webpack-plugin をインストールする

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

新しい Vue 構成ファイルを作成する

新しい Windi CSS 構成ファイルを作成する

Windi CSS 製品をエントリ ファイルに導入する

仕上げる

設定可能なパラメータ

場合

通常の Vite アプレット (uni-app を例にします)

vite-plugin-windicss と Windicss をインストールする

@dcasia/mini-program-tailwind-webpack-plugin をインストールします

Vite 設定ファイルを更新する

新しい Windi CSS 構成ファイルを作成する

Windi CSS 製品をエントリ ファイルに導入する

仕上げる

設定可能なパラメータ

場合

ネイティブ開発またはカスタム ビルド ツール用のミニ プログラム

設定可能なパラメータ

場合

トラップ

機能比較

互換性範囲

ミニプログラム Tailwind Webpack プラグイン

Windi CSS 製品をエントリファイルに導入する

Windi CSS 製品をエントリファイルに導入する

Windi CSS 製品をエントリファイルに導入する

Windi CSS 製品をエントリファイルに導入する

ネイティブ開発またはカスタムビルドツール用のミニプログラム