mini program tailwind
1.5.6
미니 프로그램에서 원본 Tailwind/Windi CSS를 사용하도록 하세요.
Digital Creative는 상하이에 위치한 디지털 제품 연구, 디자인 및 개발 회사입니다.
우리에 대해 알아보세요
- 우리가 하는 일
- 회사 소개
- 문의하기
더 나은 읽기 경험을 위해 독립 문서를 읽는 것이 좋습니다.
애플릿 자체는 Tailwind/Windi CSS에서 생성된 선택기 이름에 포함된 일부 특수 이스케이프 문자(예: [ ! . 등)를 지원하지 않으므로 이로 인해 개발 시 사용해야 하는 일부 기능을 사용할 수 없게 됩니다. 애플릿. w-[30px] translate-x-1/2 !bg-[#ff0000] 등과 같이 웹 애플리케이션에서 사용되는 유연한 구문 및 임의 값/값 자동 추론 기능. 이는 의심할 여지없이 우리의 개발 효율성과 정신적 부담에 상당한 영향을 미칩니다.
이러한 제한을 극복하기 위해 우리는 Tailwind/Windi CSS를 사용하여 작은 프로그램을 개발할 때 웹 애플리케이션 개발 시 매우 일관된 개발 경험을 유지할 수 있도록 돕기 위해 이 플러그인을 개발했습니다. 더 이상 어떤 문자열이 아닌지 신경 쓸 필요가 없습니다. 작성 방법을 변경해야 하는 문제를 지원하는 대신 Tailwind/Windi CSS의 공식 구문에 따라 미니 프로그램 스타일을 계속 작성하면 그 뒤에 있는 호환성 작업이 이 플러그인에 의해 자동으로 처리됩니다.
또한 이 플러그인에는 rpx 값 자동 변환 기능도 통합되어 있습니다. 이 기능은 Tailwind/Windi CSS 구성 파일과 소스 코드에 작성한 rem 및 px 단위 값을 최종 생성된 스타일 파일의 rpx 단위 값으로 자동 변환할 수 있습니다. 이를 통해 개발자는 웹 프로젝트에 사용된 것과 동일한 테마 구성을 재사용할 수 있으며 작은 프로그램이 반응형 픽셀이 제공하는 기능을 계속 사용할 수 있습니다.
이 플러그인의 작동 방식에 대해 자세히 알아보세요.
미니 프로그램에서 원본 Tailwind/Windi CSS를 사용하도록 하세요.
플러그인 설치에 적합한 미니 프로그램 유형 중 하나를 선택하세요.
MPX는 탁월한 개발 경험과 심층적인 성능 최적화를 갖춘 향상된 교차 터미널 애플릿 프레임워크입니다.
MPX 프레임워크는 Webpack을 구성 도구로 사용하는 일반적인 향상된 미니 프로그램 개발 프레임워크이므로 이 설치 데모에서는 MPX 프로젝트를 일반적인 사례로 사용하여 대부분의 Webpack과 유사한 미니 프로그램 프로젝트에 대한 플러그인을 설치하는 방법을 보여줍니다. 다음 설치 단계는 Webpack 프로젝트에 널리 적용됩니다 . 대부분의 Webpack 미니 프로그램 프로젝트에서는 설치 시 동일한 단계만 참조하면 됩니다.
npm i windicss-webpack-plugin -D자세한 내용은 Windi CSS 공식 문서를 참조하세요.
Windi CSS 웹팩 통합
npm i @dcasia/mini-program-tailwind-webpack-plugin -DWebpack 플러그인 사용
//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.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 프로필 호환성 규칙
// 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 변환 프로세스 중 계산 비율에 영향을 미칩니다. |
| 유틸리티Settings.spaceBetweenItems | Array<string> | [] | Space Between 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.divideItems | Array<string> | [] | 너비 나누기 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
통합 사례: MPX 프로젝트
다중 터미널 통합 개발 솔루션 Taro
이 플러그인에는 Taro 플러그인이 포함되어 있으며 "원클릭 설치"를 통해 Taro 애플릿에 쉽게 적용할 수 있습니다.
Taro 플러그인은 다음 프런트엔드 프레임워크와 호환됩니다.
- 반응하다
- 뷰 2
- 뷰 3
- 프리액트
또한 혼합 기본 구성 요소 개발에서 Tailwind/Windi CSS를 사용하는 것과도 호환됩니다.
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.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 프로필 호환성 규칙
// app.js
import 'windi.css' ; Taro에서 Windi CSS가 제공하는 효율적인 개발 경험을 즐겨보세요.
| 이름 | 유형 | 기본 | 설명하다 |
|---|---|---|---|
| WindiCSS 활성화 | 부울 | true | 플러그인과 함께 제공되는 Windi CSS를 활성화할지 여부 |
| windiCSS구성파일 | 끈 | 프로젝트 루트 디렉터리에서 구성 파일을 읽습니다. | 필요한 경우 Windi CSS 구성 파일의 경로를 수동으로 설정하세요. |
| 활성화Rpx | 부울 | false | rpx 단위 값으로 자동 변환 활성화 여부(Taro에는 이 기능이 포함되어 있으므로 기본적으로 꺼져 있음) |
| 디자인너비 | 숫자 | 375 | 디자인 초안의 픽셀 너비 값은 rpx 변환 프로세스 중 계산 비율에 영향을 미칩니다. |
| 유틸리티Settings.spaceBetweenItems | Array<string> | [] | Space Between 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.divideItems | Array<string> | [] | 너비 나누기 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.customComponents | Array<string> | [] | Uno CSS를 Atomic CSS 엔진으로 사용하는 개발자는 프로젝트 상황에 맞게 구성해야 합니다. 기본적으로 미니 프로그램과 함께 제공되는 모든 구성 요소 이름이 포함되어 있으므로 대부분의 경우 개발자는 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 활성화 디버그로그 | 부울 | false | 이 플러그인의 내부 실행 로그 인쇄 활성화 여부 |
- 통합 사례: Taro - React 프로젝트
- 통합 사례: Taro - Vue 2 프로젝트
- 통합 사례: Taro - Vue 3 프로젝트
uni-app, 한 번 개발하면 여러 터미널을 커버할 수 있습니다.
이 기사에는 uni-app의 Vue 3 및 Vue 2 설치 데모가 포함되어 있습니다.
다음 미니 프로그램 유형을 참조하세요: 일반 Vite 미니 프로그램(uni-app을 예로 들어)
npm i windicss-webpack-plugin -D자세한 내용은 Windi CSS 공식 문서를 참조하세요.
Windi CSS 웹팩 통합
npm i @dcasia/mini-program-tailwind-webpack-plugin -D 프로젝트 루트 디렉터리에 새 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.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 프로필 호환성 규칙
// main.js
import 'windi.css' 미니 프로그램 프로젝트에서 Windi CSS가 제공하는 효율적인 개발 경험을 시작해 보세요.
| 이름 | 유형 | 기본 | 설명하다 |
|---|---|---|---|
| 활성화Rpx | 부울 | true | rpx 단위 값으로 자동 변환 활성화 여부 |
| 디자인너비 | 숫자 | 350 | 디자인 초안의 픽셀 너비 값은 rpx 변환 프로세스 중 계산 비율에 영향을 미칩니다. |
| 유틸리티Settings.spaceBetweenItems | Array<string> | [] | Space Between 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.divideItems | Array<string> | [] | 너비 나누기 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.customComponents | Array<string> | [] | Uno CSS를 Atomic CSS 엔진으로 사용하는 개발자는 프로젝트 상황에 맞게 구성해야 합니다. 기본적으로 미니 프로그램과 함께 제공되는 모든 구성 요소 이름이 포함되어 있으므로 대부분의 경우 개발자는 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
통합 사례: uni-app Vue 2 프로젝트
uni-app, 한 번 개발하면 여러 터미널을 커버할 수 있습니다.
uni-app에서 미니 프로그램 개발을 위해 Vue 3를 사용할 때 프로젝트는 Vite를 기반으로 구축되므로, 이 설치 데모에서는 uni-app Vue 3 프로젝트를 일반적인 사례로 사용하여 대부분의 Vite와 유사한 미니 프로그램 프로젝트를 플러그인하는 방법을 보여줍니다. . 설치하다. 다음 설치 단계는 Vite 프로젝트에 광범위하게 적용됩니다 . 대부분의 Vite와 유사한 애플릿 프로젝트의 경우 설치 시 동일한 단계만 참조하면 됩니다.
npm i vite-plugin-windicss windicss -D자세한 내용은 Windi CSS 공식 문서를 참조하세요.
Windi CSS Vite 통합
npm i @dcasia/mini-program-tailwind-webpack-plugin -D 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.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 프로필 호환성 규칙
// main.js
import 'virtual:windi.css' 미니 프로그램 프로젝트에서 Windi CSS가 제공하는 효율적인 개발 경험을 시작해 보세요.
| 이름 | 유형 | 기본 | 설명하다 |
|---|---|---|---|
| 활성화Rpx | 부울 | true | rpx 단위 값으로 자동 변환 활성화 여부 |
| 디자인너비 | 숫자 | 350 | 디자인 초안의 픽셀 너비 값은 rpx 변환 프로세스 중 계산 비율에 영향을 미칩니다. |
| 유틸리티Settings.spaceBetweenItems | Array<string> | [] | Space Between 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.divideItems | Array<string> | [] | 너비 나누기 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.customComponents | Array<string> | [] | Uno CSS를 Atomic CSS 엔진으로 사용하는 개발자는 프로젝트 상황에 맞게 구성해야 합니다. 기본적으로 미니 프로그램과 함께 제공되는 모든 구성 요소 이름이 포함되어 있으므로 대부분의 경우 개발자는 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
통합 사례: uni-app Vue 3 프로젝트
프로젝트를 개발하는 번들러나 워크플로우 도구에 관계없이 프로그래밍 가능한 파일 모니터링 및 처리 서비스가 있는 한 이를 사용자 정의할 수 있습니다. 그러나 여기서 분명히 해야 할 한 가지는 기본 개발 모드를 기반으로 이 플러그인의 기능을 통합하려면 플러그인의 기반으로 프로그래밍 가능한 파일 모니터링 및 처리 서비스 세트를 시작해야 한다는 것입니다. in의 작업 은 일반적으로 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 변환 프로세스 중 계산 비율에 영향을 미칩니다. |
| 유틸리티Settings.spaceBetweenItems | Array<string> | [] | Space Between 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.divideItems | Array<string> | [] | 너비 나누기 유틸리티를 사용하는 컨테이너의 하위 구성 요소 이름입니다. 공통 컴포넌트인 뷰, 버튼, 텍스트, 이미지 4가지가 기본적으로 포함되어 있어 대부분의 경우 개발자가 이 항목을 구성할 필요가 없습니다. 새 구성 요소를 추가해야 하는 경우 배열에 새 구성 요소 이름을 추가할 수 있습니다. |
| 유틸리티Settings.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 값으로 변환됨 | ✅ |
>= 4.0.0>= 3.4.0>= 2.7.5
