mini program tailwind
1.5.6
Biarkan program mini Anda menggunakan Tailwind/Windi CSS asli
Dari Digital Creative, sebuah perusahaan riset, desain, dan pengembangan produk digital yang berlokasi di Shanghai.
Kenali kami
- Apa yang kami lakukan
- Tentang kami
- Hubungi kami
Disarankan untuk membaca dokumen independen untuk pengalaman membaca yang lebih baik
Karena applet itu sendiri tidak mendukung beberapa karakter escape khusus (seperti [ ! . dll.) yang terdapat dalam nama pemilih yang dihasilkan oleh Tailwind/Windi CSS, hal ini mencegah Anda menggunakan beberapa fitur yang harus digunakan saat mengembangkan applet. Sintaks fleksibel dan fungsi penyimpulan otomatis Nilai/Nilai sewenang-wenang yang digunakan dalam aplikasi web, seperti w-[30px] translate-x-1/2 !bg-[#ff0000] , dll. Hal ini tidak diragukan lagi berdampak besar pada efisiensi pembangunan dan beban mental kita.
Untuk mendobrak batasan ini, kami mengembangkan plugin ini untuk membantu Anda mempertahankan pengalaman pengembangan yang sangat konsisten dalam mengembangkan aplikasi web saat menggunakan Tailwind/Windi CSS untuk mengembangkan program kecil digunakan. Daripada mendukung masalah karena harus mengubah metode penulisan, lanjutkan menulis gaya program mini Anda sesuai dengan sintaks resmi Tailwind/Windi CSS , dan pekerjaan kompatibilitas di baliknya ditangani secara diam-diam oleh plugin ini.
Selain itu, plugin ini juga mengintegrasikan fungsi konversi otomatis nilai rpx . Fungsi ini dapat secara otomatis mengonversi nilai unit rem dan px yang kami tulis di file konfigurasi CSS Tailwind/Windi dan kode sumber menjadi nilai unit rpx di file gaya akhir yang dihasilkan. Hal ini memungkinkan pengembang untuk menggunakan kembali konfigurasi tema yang sama yang digunakan dalam proyek web dan memungkinkan program kecil untuk terus menggunakan fitur yang dibawa oleh piksel responsif.
Pelajari lebih lanjut tentang cara kerja plugin ini
Biarkan program mini Anda menggunakan Tailwind/Windi CSS asli
Pilih salah satu jenis program mini yang sesuai untuk Anda instal plug-in
MPX, kerangka applet lintas terminal yang disempurnakan dengan pengalaman pengembangan luar biasa dan optimalisasi kinerja mendalam.
Karena kerangka kerja MPX adalah kerangka pengembangan program mini yang disempurnakan menggunakan Webpack sebagai alat konstruksinya, demonstrasi instalasi ini menggunakan proyek MPX sebagai kasus khusus untuk mendemonstrasikan cara menginstal plug-in untuk sebagian besar proyek program mini mirip Webpack. Langkah-langkah instalasi berikut dapat diterapkan secara luas di proyek Webpack . Untuk sebagian besar proyek program mini Webpack, Anda hanya perlu mengacu pada langkah-langkah yang sama untuk instalasi.
npm i windicss-webpack-plugin -DLihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Integrasi Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -DMenggunakan 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
} )
]
} Buat file konfigurasi windi.config.js baru di direktori root proyek
//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
}
}File konfigurasi Tailwind CSS juga berlaku di sini
Lihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Aturan kompatibilitas profil Windi CSS
// app.mpx
< style src =" windi.css " > </ style >Untuk applet Webpack proyek non-MPX lainnya, Anda dapat merujuk ke metode serupa untuk memperkenalkan
windi.cssdi file entri, seperti:// main.js import 'windi.css'Lihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Perkenalkan file gaya Windi CSS
Mulai menikmati pengalaman pengembangan efisien yang dibawa oleh Windi CSS dalam proyek program mini?
| nama | jenis | bawaan | menggambarkan |
|---|---|---|---|
| aktifkanRpx | Boolean | true | Apakah akan mengaktifkan konversi otomatis ke nilai satuan rpx |
| lebar desain | Nomor | 350 | Nilai lebar piksel rancangan desain. Ukuran ini akan mempengaruhi rasio perhitungan pada saat proses konversi rpx. |
| utilitasSettings.spaceBetweenItems | Array<string> | [] | Nama komponen anak dalam wadah yang menggunakan utilitas Space Between. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasPengaturan.divideItems | Array<string> | [] | Nama komponen anak dalam kontainer yang menggunakan utilitas Divide width. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
Kasus Integrasi: Proyek MPX
Taro, solusi pengembangan terpadu multi-terminal
Plug-in ini berisi plug-in Taro, yang dapat dengan mudah diadaptasi ke applet Taro melalui "instalasi satu-klik".
Plug-in Taro kompatibel dengan kerangka front-end berikut
- Bereaksi
- Gambar 2
- Gambar 3
- Prekta
Ini juga kompatibel dengan penggunaan Tailwind/Windi CSS dalam pengembangan komponen asli campuran.
npm i @dcasia/mini-program-tailwind-webpack-plugin -D
// config/index.js
const config = {
plugins : [
[ '@dcasia/mini-program-tailwind-webpack-plugin/dist/taro' , {
// ...options
} ]
]
} Buat file konfigurasi windi.config.js baru di direktori root proyek
// windi.config.js
export default {
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}File konfigurasi Tailwind CSS juga berlaku di sini
Lihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Aturan kompatibilitas profil Windi CSS
// app.js
import 'windi.css' ; Mulai menikmati pengalaman pengembangan efisien yang dibawa oleh Windi CSS di Taro?
| nama | jenis | bawaan | menggambarkan |
|---|---|---|---|
| aktifkanWindiCSS | Boolean | true | Apakah akan mengaktifkan Windi CSS yang disertakan dengan plugin |
| anginiCSSConfigFile | Rangkaian | Baca file konfigurasi di direktori root proyek | Atur jalur ke file konfigurasi Windi CSS secara manual jika perlu |
| aktifkanRpx | Boolean | false | Apakah akan mengaktifkan konversi otomatis ke nilai satuan rpx (karena Taro hadir dengan fungsi ini, fungsi ini dinonaktifkan secara default) |
| lebar desain | Nomor | 375 | Nilai lebar piksel rancangan desain. Ukuran ini akan mempengaruhi rasio perhitungan pada saat proses konversi rpx. |
| utilitasSettings.spaceBetweenItems | Array<string> | [] | Nama komponen anak dalam wadah yang menggunakan utilitas Space Between. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasPengaturan.divideItems | Array<string> | [] | Nama komponen anak dalam kontainer yang menggunakan utilitas Divide width. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasSettings.customComponents | Array<string> | [] | Pengembang yang menggunakan Uno CSS sebagai mesin Atomic CSS perlu mengkonfigurasinya sesuai dengan situasi proyek. Secara default, semua nama komponen yang disertakan dengan program mini disertakan, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| aktifkanDebugLog | Boolean | false | Apakah akan mengaktifkan pencetakan log berjalan internal plugin ini |
- Kasus integrasi: Taro - Proyek React
- Kasus integrasi: proyek Taro - Vue 2
- Kasus integrasi: proyek Taro - Vue 3
uni-app, kembangkan sekali dan mencakup banyak terminal.
Artikel ini berisi dua demonstrasi instalasi Vue 3 dan Vue 2 dari uni-app.
Silakan merujuk ke jenis program mini berikutnya: program mini Vite reguler (mengambil uni-app sebagai contoh)
npm i windicss-webpack-plugin -DLihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Integrasi Windi CSS Webpack
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Buat file konfigurasi vue.config.js baru di direktori root proyek dan gunakan 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
} )
]
}
} Buat file konfigurasi windi.config.js baru di direktori root proyek
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}File konfigurasi Tailwind CSS juga berlaku di sini
Lihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Aturan kompatibilitas profil Windi CSS
// main.js
import 'windi.css' Mulai menikmati pengalaman pengembangan efisien yang dibawa oleh Windi CSS dalam proyek program mini?
| nama | jenis | bawaan | menggambarkan |
|---|---|---|---|
| aktifkanRpx | Boolean | true | Apakah akan mengaktifkan konversi otomatis ke nilai satuan rpx |
| lebar desain | Nomor | 350 | Nilai lebar piksel rancangan desain. Ukuran ini akan mempengaruhi rasio perhitungan pada saat proses konversi rpx. |
| utilitasSettings.spaceBetweenItems | Array<string> | [] | Nama komponen anak dalam wadah yang menggunakan utilitas Space Between. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasPengaturan.divideItems | Array<string> | [] | Nama komponen anak dalam kontainer yang menggunakan utilitas Divide width. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasSettings.customComponents | Array<string> | [] | Pengembang yang menggunakan Uno CSS sebagai mesin Atomic CSS perlu mengkonfigurasinya sesuai dengan situasi proyek. Secara default, semua nama komponen yang disertakan dengan program mini disertakan, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
Kasus integrasi: proyek uni-app Vue 2
uni-app, kembangkan sekali dan mencakup banyak terminal.
Karena proyek ini dibangun berdasarkan Vite ketika menggunakan Vue 3 untuk pengembangan program mini di uni-app, demonstrasi instalasi ini menggunakan proyek uni-app Vue 3 sebagai kasus umum untuk mendemonstrasikan cara menyambungkan sebagian besar proyek program mini yang mirip Vite . Langkah-langkah instalasi berikut dapat diterapkan secara luas pada proyek Vite . Untuk sebagian besar proyek applet mirip Vite, Anda hanya perlu merujuk pada langkah-langkah instalasi yang sama.
npm i vite-plugin-windicss windicss -DLihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Integrasi Windi CSS Vite
npm i @dcasia/mini-program-tailwind-webpack-plugin -D Gunakan plugin di file konfigurasi 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 ( )
]
} Buat file konfigurasi windi.config.js baru di direktori root proyek
//windi.config.js
export default {
preflight : false ,
prefixer : false ,
extract : {
// 忽略部分文件夹
exclude : [ 'node_modules' , '.git' , 'dist' ]
} ,
corePlugins : {
// 禁用掉在小程序环境中不可能用到的 plugins
container : false
}
}File konfigurasi Tailwind CSS juga berlaku di sini
Lihat dokumentasi resmi Windi CSS untuk lebih jelasnya
Aturan kompatibilitas profil Windi CSS
// main.js
import 'virtual:windi.css' Mulai menikmati pengalaman pengembangan efisien yang dibawa oleh Windi CSS dalam proyek program mini?
| nama | jenis | bawaan | menggambarkan |
|---|---|---|---|
| aktifkanRpx | Boolean | true | Apakah akan mengaktifkan konversi otomatis ke nilai satuan rpx |
| lebar desain | Nomor | 350 | Nilai lebar piksel rancangan desain. Ukuran ini akan mempengaruhi rasio perhitungan pada saat proses konversi rpx. |
| utilitasSettings.spaceBetweenItems | Array<string> | [] | Nama komponen anak dalam wadah yang menggunakan utilitas Space Between. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasPengaturan.divideItems | Array<string> | [] | Nama komponen anak dalam kontainer yang menggunakan utilitas Divide width. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasSettings.customComponents | Array<string> | [] | Pengembang yang menggunakan Uno CSS sebagai mesin Atomic CSS perlu mengkonfigurasinya sesuai dengan situasi proyek. Secara default, semua nama komponen yang disertakan dengan program mini disertakan, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
Kasus integrasi: proyek uni-app Vue 3
Apa pun bundler atau alat alur kerja yang digunakan untuk mengembangkan proyek Anda, selama ada layanan pemantauan dan pemrosesan file yang dapat diprogram, Anda dapat menyesuaikannya. Namun satu hal yang perlu diperjelas di sini adalah jika kita ingin mengintegrasikan fungsi plug-in ini berdasarkan mode pengembangan asli, kita harus memulai serangkaian layanan pemantauan dan pemrosesan file yang dapat diprogram sebagai dasar untuk plug-in. dalam operasi . Layanan ini biasanya disediakan oleh Alat pihak ketiga yang dikonfigurasi seperti Webpack dan Gulp selesai.
Pengembang yang menggunakan Tailwind/Windi CSS CLI harap baca
Jika Anda mengembangkan UI program kecil melalui CLI resmi Tailwind/Windi CSS, sayangnya, karena CLI tidak mendukung mekanisme plug-in dan tidak dapat mendukung modifikasi file template, kami tidak dapat menyesuaikannya atas dasar ini.
Kami telah memisahkan dan mengemas fungsi inti plugin ini ke dalam file universal-handler.js . Jika Anda ingin mengintegrasikan fungsi inti plugin ini ke dalam alat pembuatan khusus, Anda dapat memperkenalkan universal-handler ke dalam alur kerja. logika:
const { handleTemplate , handleStyle } = require ( '@dcasia/mini-program-tailwind-webpack-plugin/universal-handler' )Templat proses:
const rawContent = '<view class="w-10 h-[0.5px] text-[#ffffff]"></view>'
const handledTemplate = handleTemplate ( rawContent )Gaya pemrosesan:
const rawContent = '.h-\[0\.5px\] {height: 0.5px;}'
const handledStyle = handleStyle ( rawContent , options )Anda kemudian dapat mengembalikan string yang diproses ke alur kerja asli untuk menghasilkan file akhir.
Pelajari lebih lanjut tentang detail praktis penerapan kustom
Program mini mengintegrasikan implementasi khusus Windi CSS
| nama | jenis | bawaan | menggambarkan |
|---|---|---|---|
| aktifkanRpx | Boolean | false | Apakah akan mengaktifkan konversi otomatis ke nilai satuan rpx |
| lebar desain | Nomor | 350 | Nilai lebar piksel rancangan desain. Ukuran ini akan mempengaruhi rasio perhitungan pada saat proses konversi rpx. |
| utilitasSettings.spaceBetweenItems | Array<string> | [] | Nama komponen anak dalam wadah yang menggunakan utilitas Space Between. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasPengaturan.divideItems | Array<string> | [] | Nama komponen anak dalam kontainer yang menggunakan utilitas Divide width. Empat komponen umum, tampilan, tombol, teks, dan gambar, disertakan secara default, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
| utilitasSettings.customComponents | Array<string> | [] | Pengembang yang menggunakan Uno CSS sebagai mesin Atomic CSS perlu mengkonfigurasinya sesuai dengan situasi proyek. Secara default, semua nama komponen yang disertakan dengan program mini disertakan, jadi dalam banyak kasus pengembang tidak perlu mengonfigurasi item ini. Jika Anda perlu menambahkan komponen baru, Anda dapat menambahkan nama komponen baru ke dalam array. |
Kasus integrasi: Implementasi khusus berdasarkan Gulp
Langkah demonstrasi mengambil contoh pengintegrasian Windi CSS (Windi CSS memiliki pengalaman yang lebih baik dan kompatibel dengan Tailwind CSS)
Pelajari lebih lanjut tentang Windi CSS
Angin CSS
Untuk mengaktifkan gaya komponen yang dipengaruhi oleh produk CSS Tailwind/Windi di program mini, kita perlu menyetel cakupan gaya styleIsolation di file konfigurasi JSON setiap komponen. Jika tidak, meskipun Tailwind/Windi CSS berfungsi normal, ia tidak bisa digunakan. Mengembangkan komponen UI.
Applet talas tidak terpengaruh oleh pembatasan ini
{
"component" : true ,
"styleIsolation" : " apply-shared "
}Masalah terkait
Masalah #1
Karena fungsi hot reload alat pengembang WeChat saat ini tidak dapat mendeteksi perubahan pada konten file wxss yang diimpor oleh @import dalam file gaya, ketika fungsi hot reload diaktifkan untuk pengembangan, simulator tidak akan mengikuti perubahan Anda ke Tailwind/Windi CSS. Perbarui UI berdasarkan perubahan. Saat ini, pejabat WeChat mengetahui adanya bug ini Sebelum bug diperbaiki, kami menyarankan Anda mematikan hot reload selama pengembangan dan menggunakan penyegaran halaman otomatis tradisional untuk melihat pratinjau setiap pembaruan UI. Saat ini, masalah ini telah diperbaiki di Alat Pengembang WeChat 1.06.2205231 RC.
Masalah terkait
Edisi #3
Untuk deklarasi kelas gaya eksternal externalClasses di applet asli, plug-in hanya mendukung deklarasi nama externalClasses sebagai 'class' , dan tidak mendukung nama lain.
Component ( {
externalClasses : [ 'class' ]
} )Masalah terkait
Edisi #44
| tata bahasa | Jangan gunakan plugin ini | Gunakan plugin ini |
|---|---|---|
Reguler : h-10 text-white | ✅ | ✅ |
Nilai sewenang-wenang/Simpulan nilai : t-[25px] bg-[#ffffff] | ✅ | |
Pecahan : translate-x-1/2 w-8.5 | ✅ | |
Penting : !p-1 | ✅ | |
Kesimpulan nilai RGB : text-[rgb(25,25,25)] | ✅ | |
Spasi antar : space-y-2 space-y-reverse | ✅ | |
Lebar pembagian : divide-x-2 divide-y-reverse | ✅ | |
Varian : dark:bg-gray-800 | ✅ | |
Grup varian : hover:(bg-gray-400 font-medium) | ✅ | |
Responsif : md:p-2 | ✅ | |
Pemilih universal : * | ✅ | |
nilai rpx diubah dari nilai rem dan px | ✅ |
>= 4.0.0>= 3.4.0>= 2.7.5
