鐞嗙敱&鍓嶈█濡傛灉浣犺繕娌℃湁鍚杩噒ailwindcss锛岃鍏堣繑鍥炪€傛湰鏂囦笉璁瞭ailwindcss鎬庝箞鐢紝鍙濡備綍浼橀泤浣跨敤銆傚鏋滀綘鍚杩囷紝璇风户缁槄璇诲苟鑰冭檻浣跨敤tailwindcss锛屽洜涓哄湪闃呰涔嬪悗锛氬紑鍙戯細瀹冨彲鑳戒細涓轰綘鐢氳嚦浣犵殑鍓嶇鍥㈤槦鑺傜渷澶ч噺鐨勫啓浣滈鏍兼椂闂达紝瀹冧篃鍙互澶уぇ鎻愰珮浣犳垨浣犵殑椤圭洰寮€鍙戠粡楠屾彁鍗囧埗浣滐細浣犵殑椤圭洰鍖呬綋绉腑鏍峰紡浠ｇ爜鐨勬瘮渚嬩細绐佺劧涓嬮檷锛岀劧鍚庤秼浜庝笉鍙樸€備綘鐪熺殑闇€瑕佷竴涓猚ss棰勫鐞嗗櫒鍚楋紵鍙兘澶ч儴鍒嗗悓瀛﹀湪寮€鍙戞垨鑰呯淮鎶や竴涓」鐩殑鏃跺€欙紝搴旇浼氬湪椤圭洰涓娇鐢ㄥ埌css棰勫鐞嗚瑷€锛屾瘮濡俿css銆乴ess銆乻tylus绛夛紝鐢氳嚦鏈夌殑鍦ㄥ崟涓」鐩腑浼氫娇鐢ㄥ绉嶉澶勭悊璇█锛屼篃璁稿浜庡彉閲忕殑浣跨敤锛屽彲鑳芥槸涓轰簡鏂逛究澶嶇敤鏍峰紡锛屼篃鍙兘鏄负浜嗗啓涓€浜涘嚱鏁帮紝璁╂垜浠彲浠ュ涓€浜涙牱寮忓€煎仛涓€浜涘鐞嗭紝浣嗘槸澶у鏁版椂鍊欐垜浠笇鏈涜兘澶熷啓鍑哄祵濂楃殑鏍峰紡锛屾€讳箣锛屾彁楂樻垜浠殑寮€鍙戞晥鐜囷紝杩欎竴鍒囧湪tailwindcss鍑虹幇涔嬪墠鏄偅涔堢編濂斤紝鐩村埌閬囧埌tailwindcss锛屼綘浼氬彂鐜颁綘鐢氳嚦涓嶉渶瑕侀厤缃畇tylelint锛屽洜涓轰綘鍙兘鏍规湰涓嶉渶瑕佸啓cssHow&WhichVersiontailwindcssv2vsv3濡傛灉鎮ㄧ殑椤圭洰闇€瑕佸吋瀹笽E锛岃浣跨敤v2鐗堟湰銆傚鏋滀笉闇€瑕侊紝璇锋灉鏂笂v3鐗堟湰銆傚叧浜庡浣曞湪浣犵殑椤圭洰涓娇鐢╰ailwindcss锛岃鍔″繀鏌ョ湅瀹樼綉鏂囨。v2涓枃v3鑻辨枃銆傛帹鑽愭坊鍔犲畨瑁卾scode鍩轰簬postcss鐨勬彃浠跺鏋滃喅瀹氫娇鐢╰ailwindcss锛屽畨瑁卋radlc.vscode-tailwindcss锛岃繖鏄畼鏂规彁渚涚殑鎻掍欢锛屾彁渚涙彁绀恒€佽ˉ鍏ㄥ拰鏌ョ湅瀹為檯璁剧疆鏍峰紡鐨勫姛鑳姐€傞厤缃綘鐨則ailwind濡傛灉浣犲凡缁忔寜鐓ф枃妗ｆ暀绋嬫枃浠跺垱寤轰簡tailwind.config.js锛岄偅涔堟垜浠繕闇€瑕佷负杩欎釜鏂囦欢杩涗竴姝ラ厤缃甈C绔伐绋嬨€傚鏋滀綘鐨勯」鐩彧鏄疨C绔殑缃戦〉锛屼篃璁镐綘鍙渶瑕侀棶闂綘鐨勮璁″悓瀛︼紝浣犵殑椤圭洰涓湁鍝簺鍩烘湰鐨勮璁″師鍒欙紝姣斿浼氱敤鍒扮殑涓€浜涗富棰樿壊锛屽瓧浣撳ぇ灏忥紝娓愬彉锛宨nnerandoutermarginsize锛実radient锛屽父鐢ㄧ殑borderfilletsize锛実radient锛宐orderwidth锛実radient锛屽鏋滆璁″悓瀛︽病鏈夎繖浜涘師鍒欙紝閭ｅ氨鍗忓晢杩欎簺鍩烘湰鍘熷垯锛屾瘮濡備細鐢ㄤ粈涔堥鑹诧紝marginunit涓€鑸缃湪4px鐨勫€嶆暟...濡傛灉棰滆壊鏄璁″悓瀛︽彁渚涚殑锛岄」鐩腑鐨勪富棰橀鑹诧紝骞朵笖鏈夎涔夊悕绉帮紝姣斿success,info,warning绛夐鑹诧紝鎴戜滑鍙互鏍规嵁杩欎簺鏉ラ厤缃垜浠殑棰滆壊锛屽寘鎷絾涓嶉檺浜庡瓧浣撱€佽儗鏅€佽竟妗嗐€侀槾褰遍鑹诧紙閰嶇疆鍚庡彲浠ョ洿鎺ヤ娇鐢╰ext-success涔嬬被鐨勭被璁剧疆棰滆壊锛夛紝鍙互鏇夸唬css棰勫鐞嗗櫒鍙橀噺鍑芥暟//tailwindcssv3constcolors={'success'锛?#654321'锛?淇℃伅'锛?#123456'锛?璀﹀憡'锛?#666666',//...}module.exports={content:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],涓婚:{//...colors,},plugins:[],}//tailwindcssv2constcolors={'success':'#654321','info':'#123456','warning':'#666666',//...}module.exports={鍐呭:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],涓婚:{//...textColor:colors,backgroundColor:colors,borderColor:colors,},plugins:[],}v2鍜寁3鐗堟湰鐨勮缃湁浜涘樊寮傘€傞渶瑕佹寚瀹歷2鐨勫叿浣撻鑹茶缃甋pacing&Width&Height&LineHeight&RoundedCorners&BorderWidth鍥犱负tailwindcss榛樿鐨勯暱搴︾浉鍏崇殑閰嶇疆鏄熀浜巖em鐨勶紝鑰孭C绔殑澶ч儴鍒嗛」鐩垜浠浐瀹氫竴涓搴︼紝宸﹀彸鐣欑┖锛屾墍浠ュ湪澶у鏁版儏鍐典笅锛岃璁＄閮戒細鍦ㄤ竴涓浐瀹氱殑瀹藉害鍐咃紝鑰屽厓绱犵殑灏哄銆佸搴︺€侀珮搴︺€佽竟璺濋兘鏄互px涓哄崟浣嶇殑锛屾墍浠ユ垜浠渶瑕佸湪榛樿涓婂仛涓€浜涚壒瀹氱殑閰嶇疆鏉ラ€傚簲鎴戜滑鐨勯」鐩€俢onstspacing={0:0,4:'4px',8:'8px',12:'12px',//...椤圭洰涓父鐢ㄧ殑鍙互閰嶇疆}module.exports={content:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],theme:{//v3&v2spacing,lineHeight:spacing,borderWidth:spacing,borderRadius:spacing,},plugins:[],}绉诲姩閫傞厤鏂规鍙兘鏄负浜嗙Щ鍔ㄩ€傞厤锛岀幇鍦ㄦ祦琛寁iewport鏂规锛屾湁浜涢」鐩彲鑳借繕鏄敤flexable鐨勬柟妗堬紝浣嗘槸鎴戜滑涓嶆兂鎵嬪姩鎶妏x杞负rem鎴栬€卾w锛岃櫧鐒剁ぞ鍖轰篃鏈夌被浼紁xtorem鎴杙xtovw鐨刾ostcss鎻掍欢锛屼絾鏄В鍐抽棶棰樼殑鏂瑰紡杩樻槸涓嶅浼橀泤锛屽彲鑳芥槸鍥犱负鎻掍欢娌℃湁绉瀬缁存姢锛屼篃鍙兘鏄彃浠朵笉澶ソ鐢ㄥソ鐢紝鑰屼笖涓嶅吋瀹筽ostcss8锛坧xtovw璇寸殑灏辨槸浣狆煒わ級锛屾棦鐒跺ぇ瀹堕兘鏈塼ailwindcss锛屽氨璁╄繖浜涢厤缃彉寰楁洿绠€鍗曞惂锛佸鏋滀綘鐨勮璁″悓瀛︽彁渚涗簡甯歌鐨勯棿璺濇柟妗堬紝姣斿4px鐨勫€嶆暟鎴栬€?px鐨勫€嶆暟锛岀幇鍦ㄥ亣璁捐璁″悓瀛︾殑璁捐绋块兘鏄?50px锛屾垜浠彲浠ヤ互姝や负鍩虹鍐欎袱涓嚱鏁版柟娉曟潵澶勭悊pxtorem鍜宲xtovw鐨勪换鍔★紝濡傛灉浣犳槸涓€涓伒娲荤殑瑙ｅ喅鏂规锛屼娇鐢╬xToRem锛屽鏋滀綘鏄竴涓鍙ｈ嚜閫傚簲瑙ｅ喅鏂规锛屼娇鐢╬xToVmin銆俧unctionpxToRem(variable){return`${variable/75}rem`}functionpxToVmin(variable){return`${variable/7.5}vmin`}//flexableconstfontSize={12:pxToRem(12),14:pxToRem(14),16:pxToRem(16),...},spacing={0:0,4:pxToRem(4),8:pxToRem(8),12:pxToRem(12),...}//viewportconstfontSize={12:pxToVmin(12),14:pxToVmin(14),16:pxToVmin(16),...},spacing={0:0,4:pxToVmin(4),8:pxToVmin(8),12:pxToVmin(12),...}module.exports={鍐呭:['./index.html','./src/**/*.{vue,js,ts,jsx,tsx}'],theme:{//...fontSize,spacing},plugins:[],}褰撶劧涔熷彲浠ラ€氳繃杩欑鏂瑰紡閰嶇疆鍦嗚澶у皬锛岃竟妗嗗搴︾瓑銆傛槸涓嶆槸姣斾娇鐢ㄦ彃浠舵洿浼橀泤锛熸垜瀵筩ss棰勫鐞嗗櫒鐨勫祵濂楄娉曟儏鏈夌嫭閽燂紝鍦╰ailwindcss涓彲浠ュ悧锛熷畨鎺掞紒tailwindcss鏈変竴涓彃浠跺彨@tailwindcss/nesting锛屾槸鍩轰簬瀹樼綉鐨勪竴浜涢厤缃€傞渶瑕佹敞鎰忕殑鏄枃妗ｆ槸涓簆ostcss閰嶇疆tailwindcss/宓屽銆傚叾瀹為渶瑕侀厤缃瓳tailwindcss/nesting锛岀劧鍚庡氨鍙互鎻愪緵鍩轰簬css鐨勫祵濂楄兘鍔涗簡锛岃瘯璇曞憲~鍥哄畾琛屾暟鍚庢埅鏂湁鏃跺€欐垜浠細鍦╯tage鍐欎竴娈垫枃瀛楀埌x琛屽悗鏄剧ず...瑕佸啓鍑犺鏍峰紡浠ｇ爜锛屾墍浠ユ垜浠€氬父浼氬畾涔夎繖鏍蜂竴涓猻css宸ュ叿鍑芥暟@mixinellipsis($line:1,$substract:0){@if$line==1{white-sp鐜嬬墝锛歯owrap锛涙枃鏈孩鍑猴細鐪佺暐鍙凤紱}@else{鏄剧ず锛?webkit-box锛?webkit-line-clamp:$line;-webkit-box-orient锛氬瀭鐩达紱}瀹藉害锛?00%-$substract锛?hidden;}tailwindcss閽堝杩欑鐗规畩鎯呭喌鎻愪緵浜嗕竴涓笓鏈夋彃浠禓tailwindcss/line-clamp锛屽畨瑁呭嵆鍙紝鐒跺悗鍦╰ailwind.config.js涓殑plugins涓紩鍏ュ畨瑁呮彃浠秐pminstall-D@tailwindcss/line-clamp閰嶇疆//tailwind.config.jsmodule.exports={//...鎻掍欢锛歔require('@tailwindcss/line-clamp'),],}浣跨敤
