உயிர்மூச்சு தொடர்பான தமிழ் கூறுகளை உருவாக்கும் உயிர்மூச்சு தொடர்பான தமிழ் கூறுகளை உருவாக்கும் உயிர்மூச்சு தொடர்பான தமிழ் கூறுகளை உருவாக்கும் உயிர்மூச்சு தொடர்பான தமிழ் கூறுகளை உருவாக்கும்

தமிழ் CSS உடன் தனிப்பயன் உயிர்மூச்சு கூறுகளை உருவாக்கவும். பொத்தான்கள், உள்ளீடுகள், உரைப்பெட்டிகள், தேர்வுகள் மற்றும் வழிச்சுட்டிகளை உருவாக்கவும், உண்மையான நேர் முன்னோட்டம் மற்றும் உங்கள் திட்டங்களில் பயன்படுத்த தயார் குறியீடு.

டெய்லுவிண்ட் CSS உடன் React கூறி உருவாக்கி

டெய்லுவிண்ட் CSS உடன் React கூறிகளை உருவாக்கி நேரடி முன்னோட்டத்தைக் காண்க

கூறி வகை

பண்புகள்

ஒத்திசைவு காட்சி

நிலை முன்னோட்டம்

நேரடி முன்னோட்டம்

உருவாக்கப்பட்ட குறியீடு

<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 கூறுப்பொருள் கட்டுமானி: உங்கள் தனிப்பயன் UI கூறுப்பொருட்களை உடனடி முன்னோட்டத்துடன் உருவாக்கவும்

உடனடி React Tailwind கூறுப்பொருட்களை உருவாக்கவும் காட்சி ஆசிரியருடன்

React Tailwind கூறுப்பொருள் கட்டுமானி என்பது Tailwind CSS உடன் தனிப்பயன் React கூறுப்பொருட்களை உடனடியாக உருவாக்க உதவும் வல்லமை வாய்ந்த காட்சி ஆசிரியர் ஆகும். இந்த இலவச ஆன்லைன் React Tailwind கூறுப்பொருள் கட்டுமானி, வடிவமைப்பாளர்களும் மேம்பாட்டாளர்களும் CSS குறியீட்டை கைமுறையாக எழுதாமல் உற்பத்திக்கு தயார் UI கூறுப்பொருட்களை உருவாக்க, தனிப்பயனாக்க மற்றும் ஏற்றுக்கொள்ள உதவுகிறது. எங்கள் உடனடி முன்னோட்ட React Tailwind கட்டுமானி மூலம், நீங்கள் பொத்தான்கள், படிவங்கள், உள்ளீடுகள், தேர்வு கீழ்த்தட்டுகள் மற்றும் வழிச்சுட்டி கூறுப்பொருட்களை Tailwind's utility-first CSS கட்டமைப்பைப் பயன்படுத்தி வடிவமைக்கும்போது உண்மையான நேர மாற்றங்களைக் காணலாம்.

எங்கள் React Tailwind கூறுப்பொருள் கட்டுமானி பொத்தான்கள், உரை உள்ளீடுகள், உரை பகுதிகள், தேர்வு கீழ்த்தட்டுகள் மற்றும் வழிச்சுட்டி வழிசெலுத்தல் உள்ளிட்ட அத்தியாவசிய UI கூறுப்பொருட்களை உருவாக்க ஆதரிக்கிறது. ஒவ்வொரு React கூறுப்பொருளும் Tailwind CSS utility வகுப்புகள் மூலம் நிறங்கள், இடைவெளி, டைப்பொகிராபி, எல்லைகள் மற்றும் பதிலளிக்கும் வடிவமைப்பு ஆகியவற்றை முழுமையாக தனிப்பயனாக்க முடியும் - அனைத்தும் உங்கள் பண்புகளை மாற்றும்போது உடனடி முன்னோட்டத்துடன் புதுப்பிக்கப்படும். விரைவான மாதிரி உருவாக்கம் மற்றும் கூறுப்பொருள் மேம்பாட்டிற்கு இது ஏற்றது.

React Tailwind கூறுப்பொருள் கட்டுமானியின் முக்கிய அம்சங்கள்

  • பல்வேறு கூறுப்பொருள் வகைகள்: பொத்தான்கள், உரை உள்ளீடுகள், உரை பகுதிகள், தேர்வு மெனுக்கள் மற்றும் வழிச்சுட்டி வழிசெலுத்தலை உருவாக்கவும்
  • உடனடி முன்னோட்டம்: உங்கள் பண்புகளை மாற்றும்போது உங்கள் கூறுப்பொருட்கள் உடனடியாக புதுப்பிக்கப்படுவதைக் காணலாம்
  • பதிலளிக்கும் சோதனை: கைக்கொள்ளக்கூடிய, பலகை மற்றும் மேசை காட்சிகளில் உங்கள் கூறுப்பொருட்களை முன்னோட்டம் காணலாம்
  • நிலை காட்சி: உங்கள் கூறுப்பொருட்கள் வழக்கமான, ஹோவர், கவனம் செலுத்துதல், செயலில் உள்ள நிலைகளில் எவ்வாறு தோற்றமளிக்கும் என்பதைச் சோதிக்கவும்
  • குறியீட்டு உருவாக்கம்: Tailwind CSS வகுப்புகளுடன் சுத்தமான, தயார் React குறியீட்டைப் பெறுங்கள்
  • கிளிப்போர்டுக்கு நகலெடுக்கவும்: ஒரே கிளிக்கில் உருவாக்கப்பட்ட குறியீட்டை எளிதாக நகலெடுக்கவும்
  • எந்த சார்பு இல்லை: வெளிப்புற API அழைப்புகள் அல்லது பின்னணி தேவைகள் இல்லாமல் உலகில் முழுவதும் செயல்படுகிறது

React Tailwind கூறுப்பொருள் கட்டுமானியைப் பயன்படுத்துவது: படிப்படியான வழிகாட்டி

படி 1: உங்கள் React கூறுப்பொருள் வகையைத் தேர்ந்தெடுக்கவும்

கிடைக்கும் விருப்பங்களில் இருந்து உருவாக்க விரும்பும் கூறுப்பொருள் வகையைத் தேர்ந்தெடுக்கவும்:

  • பொத்தான்: அழைப்பு-செயல்பாட்டு பொத்தான்கள், சமர்ப்பிக்கும் பொத்தான்கள் அல்லது வழிசெலுத்தல் பொத்தான்களை உருவாக்கவும்
  • உரை உள்ளீடு: ஒற்றை வரி உரையை சேகரிக்க படிவ உள்ளீட்டு புலங்களை வடிவமைக்கவும்
  • உரை பகுதி: நீண்ட உள்ளடக்கத்திற்கான பல வரி உள்ளீட்டு பகுதிகளை உருவாக்கவும்
  • தேர்வு: தனிப்பயனாக்கக்கூடிய விருப்பங்களுடன் கீழ்த்தட்டு தேர்வு மெனுக்களை உருவாக்கவும்
  • வழிச்சுட்டி: பக்க ஹைரெர்க்கியைக் காட்ட வழிச்சுட்டி வழிசெலுத்தலை வடிவமைக்கவும்

ஒவ்வொரு கூறுப்பொருள் வகைக்கும் தனிப்பயனாக்கக்கூடிய பண்புகள் பட்டியலில் தோன்றும்.

படி 2: Tailwind CSS பண்புகளை தனிப்பயனாக்கவும்

ஒரு கூறுப்பொருள் வகையைத் தேர்ந்தெடுத்த பிறகு, பண்புகள் பட்டியலைப் பயன்படுத்தி அதன் தோற்றம் மற்றும் நடத்தையை தனிப்பயனாக்கலாம். பொதுவான பண்புகள் பின்வருமாறு:

  • உரை உள்ளடக்கம்: பொத்தான்களில் காட்டப்படும் உரையை அல்லது உள்ளீடுகளுக்கான இடப்பெயர்வு உரையை அமைக்கவும்
  • நிறங்கள்: Tailwind's நிற பலகையில் இருந்து உரை மற்றும் பின்னணி நிறங்களைத் தேர்ந்தெடுக்கவும்
  • பாதுகாப்பு: கூறுப்பொருளின் உள்ளக இடைவெளியை சரிசெய்யவும்
  • பக்கம்: கூறுப்பொருளின் வெளிப்புற இடைவெளியை அமைக்கவும்
  • எல்லை: வெவ்வேறு பாணிகள், அகலங்கள் மற்றும் நிறங்களுடன் எல்லைகளைச் சேர்க்கவும்
  • எல்லை சுருக்கம்: உங்கள் கூறுப்பொருளின் மூலைகளை வட்டமாக்கவும்
  • அகலம்: கூறுப்பொருளின் அகலத்தை அமைக்கவும் (தானியங்கு, முழு, அல்லது சதவீத அடிப்படையில்)
  • டைப்பொகிராபி: எழுத்துரு அளவு, எடை மற்றும் பிற உரை பண்புகளை சரிசெய்யவும்

குறிப்பிட்ட கூறுப்பொருள் வகைகளுக்கு, கூடுதல் பண்புகள் கிடைக்கின்றன:

  • உரை உள்ளீடு/உரை பகுதி: இடப்பெயர்வு உரை, தேவைப்படும் நிலை மற்றும் முடக்கப்பட்ட நிலையை அமைக்கவும்
  • உரை பகுதி: வரிகளின் எண்ணிக்கையை சரிசெய்யவும்
  • தேர்வு: விருப்பங்களை சேர்க்க, தொகுத்து அல்லது அகற்றவும்
  • வழிச்சுட்டி: வழிசெலுத்தல் உருப்படிகள் மற்றும் இணைப்புகளை உள்ளமைக்கவும்

படி 3: உடனடி முன்னோட்டத்துடன் React கூறுப்பொருட்களை பார்க்கவும்

நீங்கள் பண்புகளை சரிசெய்யும்போது, உடனடி முன்னோட்டம் உண்மையில் எவ்வாறு உங்கள் கூறுப்பொருள் தோற்றமளிக்கும் என்பதைக் காட்டி உடனடியாக புதுப்பிக்கிறது. நீங்கள் மேலும்:

  • பதிலளிக்கும் நடத்தையை சோதிக்கவும்: கைக்கொள்ளக்கூடிய, பலகை மற்றும் மேசை காட்சிகளுக்கு மாறி உங்கள் கூறுப்பொருள் அனைத்து திரை அளவுகளிலும் நன்றாக தோற்றமளிப்பதை உறுதிப்படுத்தவும்
  • வெவ்வேறு நிலைகளைச் சோதிக்கவும்: உங்கள் கூறுப்பொருள் வழக்கமான, ஹோவர், கவனம் செலுத்துதல் மற்றும் செயலில் உள்ள நிலைகளில் எவ்வாறு தோற்றமளிக்கும் என்பதைப் பாருங்கள்

படி 4: React Tailwind குறியீட்டை ஏற்றுக்கொள்ளவும்

நீங்கள் உங்கள் கூறுப்பொருளுடன் திருப்தியடைந்தால், கருவி தானாகவே Tailwind CSS வகுப்புகளுடன் பொருந்தும் React JSX குறியீட்டை உருவாக்குகிறது. நீங்கள்:

  • **உருவ
🔗

தொடர்புடைய கருவிகள்

உங்கள் பணிப்பாக்கிலுக்கு பயனுள்ள மேலும் பயனுள்ள கருவிகளைக் கண்டறியவும்