டெயில்விண்ட் CSS வழங்குகிறது ' தெளிவானது 'ஒரு குறிப்பிட்ட உறுப்பு எந்த மிதக்கும் உறுப்புக்கு அடுத்ததாக இருக்கும்போது அதன் நடத்தையைக் கட்டுப்படுத்தும் பயன்பாடுகள். உதாரணமாக, 'தெளிவான-இடது' மற்றும் 'தெளிவான-வலது' பயன்பாட்டு வகுப்புகள், குறிப்பிட்ட கூறுகளை கொள்கலனில் உள்ள இடது-மிதக்கும் அல்லது வலது-மிதக்கும் உறுப்புகளுக்கு கீழே நகர்த்த டெவலப்பர்களுக்கு உதவுகிறது. இருப்பினும், சில நேரங்களில், பயனர்கள் குறிப்பிட்ட உறுப்புகளுக்குப் பயன்படுத்தப்படும் எந்த தெளிவையும் முடக்கி, மிதக்கும் உறுப்புகளுக்கு அடுத்ததாக தோன்ற அனுமதிக்க வேண்டும். இத்தகைய சூழ்நிலைகளில், தனிமத்தின் இயல்புநிலை மதிப்பை வரையறுக்க 'தெளிவு-இல்லை' பயன்பாடு பயன்படுத்தப்படலாம்.
டெயில்விண்ட் CSS இல் பயன்படுத்தப்பட்ட அனைத்து தெளிவுகளையும் முடக்குவதற்கான செயல்முறையை இந்தக் கட்டுரை எடுத்துக்காட்டுகிறது.
டெயில்விண்டில் பயன்படுத்தப்பட்ட அனைத்து கிளியர்களையும் எவ்வாறு முடக்குவது?
டெயில்விண்டில் பயன்படுத்தப்பட்ட அனைத்து தெளிவுகளையும் முடக்க, ஒரு HTML கோப்பை உருவாக்கி, ' தெளிவான-இல்லை HTML நிரலில் தேவையான உறுப்புடன் பயன்பாட்டு வகுப்பு. இந்த பயன்பாடானது ஒரு குறிப்பிட்ட உறுப்புக்கு பயன்படுத்தப்படும் எந்த 'தெளிவான' மதிப்பையும் மீட்டமைக்கிறது மற்றும் இயல்புநிலை மதிப்பை வரையறுக்கிறது.
தொடரியல்
< உறுப்பு வர்க்கம் = 'தெளிவாக இல்லை' > ... உறுப்பு >
உதாரணமாக
இந்த எடுத்துக்காட்டில், நாம் பயன்படுத்துவோம் ' தெளிவான-இல்லை 'பயன்பாடு' உடன் ” பயன்படுத்தப்பட்ட மீட்டமைக்க உறுப்பு அழிக்கப்பட்டு இடது மற்றும் வலது பக்கங்களில் மிதக்க அனுமதிக்கிறது:
< உடல் >
< div வர்க்கம் = 'h-96 mx-10 p-8 bg-sky-500' >
< img src = 'tailwindcss_img.png' வர்க்கம் = 'float-left p-3 w-28 h-24' எல்லாம் = 'படம்' />
< img src = 'tailwindcss_img.png' வர்க்கம் = 'ஃப்ளோட்-வலது ப-3' எல்லாம் = 'படம்' />
< ப வர்க்கம் = 'தெளிவாக இல்லை' > டெயில்விண்ட் CSS வழங்குகிறது 'தெளிவான' ஒரு உறுப்பைச் சுற்றி உள்ளடக்கத்தை மூடுவதைக் கட்டுப்படுத்தும் பயன்பாடுகள்.
உறுப்புகளுக்கு பயன்படுத்தப்படும் அனைத்து தெளிவுகளையும் எவ்வாறு முடக்குவது என்பதை இந்த எடுத்துக்காட்டு காண்பிக்கும். ஒரு குறிப்பிட்ட உறுப்புக்கு பயன்படுத்தப்பட்ட தெளிவுகளை மீட்டமைக்க, தி 'தெளிவாக இல்லை' பயன்பாடு பயன்படுத்தப்படுகிறது. ப >
div >
உடல் >
இங்கே:
- ' மிதவை-இடது ” வகுப்பு
உறுப்பை கொள்கலனின் இடது பக்கத்தில் மிதக்கிறது.
- ' மிதவை-வலது ” வகுப்பு
உறுப்பை கொள்கலனின் வலது பக்கத்தில் மிதக்கிறது.
- ' தெளிவான-இல்லை ” கிளாஸ்
உறுப்பில் பயன்படுத்தப்படும் எந்த தெளிவையும் முடக்குகிறது மற்றும் உறுப்பு இருபுறமும் மிதக்க அனுமதிக்கிறது.
வெளியீடு
மேலே உள்ள இணையப் பக்கத்தில், கொள்கலனின் இருபுறமும் உள்ளடக்கம் மிதப்பதைக் காணலாம். குறிப்பிட்ட உறுப்பிலிருந்து பயன்படுத்தப்பட்ட அனைத்து தெளிவுகளும் முடக்கப்பட்டுள்ளன என்பதை இது குறிக்கிறது.
முடிவுரை
டெயில்விண்டில் பயன்படுத்தப்பட்ட அனைத்து தெளிவுகளையும் முடக்க, '' ஐப் பயன்படுத்தவும் தெளிவான-இல்லை HTML நிரலில் தேவையான உறுப்புடன் பயன்பாட்டு வகுப்பு. இந்த பயன்பாடு ஒரு குறிப்பிட்ட உறுப்புக்கு பயன்படுத்தப்படும் எந்த தெளிவையும் மீட்டமைத்து இயல்புநிலை மதிப்பைக் குறிப்பிடுகிறது. சரிபார்ப்புக்கு, இணையப் பக்கத்திற்குச் சென்று மாற்றங்களைப் பார்க்கவும். டெயில்விண்ட் CSS இல் பயன்படுத்தப்பட்ட அனைத்து தெளிவுகளையும் முடக்குவதற்கான உதாரணத்தை இந்தக் கட்டுரை விளக்கியுள்ளது.