ટેલવિન્ડ CSS સાથે કસ્ટમ રિએક્ટ કમ્પોનન્ટ્સ બનાવો. બટનો, ઇનપુટ્સ, ટેક્સ્ટ એરિયાઓ, સિલેક્ટ્સ અને બ્રેડક્રમ્બ્સ બનાવો જે તમારા પ્રોજેક્ટ્સમાં વાપરવા માટે તૈયાર છે.
ટેલવિન્ડ CSS સાથે રિએક્ટ કમ્પોનેન્ટ બનાવો અને લાઇવ પ્રીવ્યૂ જુઓ
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
React Tailwind કમ્પોનેન્ટ બિલ્ડર એ એક શક્તિશાળી વિઝ્યુઅલ એડિટર છે જે તમને Tailwind CSS સાથે કસ્ટમ React કમ્પોનેન્ટ્સ બનાવવામાં મદદ કરે છે. આ ફ્રી ઓનલાઇન React Tailwind કમ્પોનેન્ટ બિલ્ડર ડેવલપર્સ અને ડિઝાઇનર્સને મેન્યુઅલી CSS કોડ લખ્યા વિના ઉત્પાદન-તૈયાર UI કમ્પોનેન્ટ્સ બનાવવા, કસ્ટમાઇઝ કરવા અને નિકાસ કરવામાં મદદ કરે છે. આમાં લાઇવ પ્રીવ્યૂ React Tailwind બિલ્ડર સાથે, તમે બટન, ફોર્મ, ઇનપુટ અને નેવિગેશન કમ્પોનેન્ટ્સને Tailwind's યુટિલિટી-પ્રથમ CSS ફ્રેમવર્ક ઉપયોગ કરીને ડિઝાઇન કરતી વખતે રિયલ-ટાઇમ ફેરફારોને જોઈ શકો છો.
આમાં React Tailwind કમ્પોનેન્ટ બિલ્ડર બટન, ટેક્સ્ટ ઇનપુટ, ટેક્સ્ટેરિયા, સિલેક્ટ ડ્રોપડાઉન અને બ્રેડક્રમ નેવિગેશન સહિતના આવશ્યક UI તત્વો બનાવવાનું સમર્થન કરે છે. દરેક React કમ્પોનેન્ટને રંગો, સ્પેસિંગ, ટાઇપોગ્રાફી, બોર્ડર્સ અને રિસ્પોન્સિવ ડિઝાઇન માટે Tailwind CSS યુટિલિટી વર્ગો નો ઉપયોગ કરીને પૂર્ણપણે કસ્ટમાઇઝ કરી શકાય છે - બધું તરત લાઇવ પ્રીવ્યૂ સાથે જે તમે ગુણધર્મોમાં ફેરફાર કરતી વખતે ડાયનેમિકલી અપડેટ થાય છે. રેપિડ પ્રોટોટાઇપિંગ અને કમ્પોનેન્ટ વિકાસ માટે આ પરફેક્ટ છે.
શરૂઆત કરવા માટે, તમે બનાવવા માંગતા કમ્પોનેન્ટના પ્રકારની પસંદગી કરો:
દરેક કમ્પોનેન્ટ પ્રકારની પોતાની સેટ કસ્ટમાઇઝેબલ ગુણધર્મો છે જે ગુણધર્મ પેનલમાં દેખાશે.
એક કમ્પોનેન્ટ પ્રકારની પસંદગી કર્યા પછી, તમે ગુણધર્મ પેનલનો ઉપયોગ કરીને તેની દેખાવ અને વર્તન કસ્ટમાઇઝ કરી શકો છો. સામાન્ય ગુણધર્મો માં આ શામેલ છે:
વિશિષ્ટ કમ્પોનેન્ટ પ્રકારો માટે, વધારાના ગુણધર્મો ઉપલબ્ધ છે:
તમે ગુણધર્મોમાં ફેરફાર કરતી વખતે, લાઇવ પ્રીવ્યૂ રિયલ-ટાઇમમાં અપડેટ થાય છે, જે તમારા કમ્પોનેન્ટ કેવા દેખાશે તે બતાવે છે. તમે આ પણ કરી શકો છો:
એકવાર તમે તમારા કમ્પોનેન્ટથી સંતુષ્ટ થાઓ, ટૂલ ઑટોમેટિકલી Tailwind CSS વર્ગો સાથે સંબંધિત React JSX કોડ જનરેટ કરે છે. તમે આ કરી શકો છો:
તમારા વર્કફ્લો માટે ઉપયોગી થવાના વધુ સાધનો શોધો