Tailwind ބެސްޓް ޕްރެކްޓިސް - ދަ އަލްޓިމޭޓް ގައިޑް ފޯ Tailwind CSS

ޔުޓިލިޓީ ފަސްޓް CSS ތަންފީޒު ކުރުމަށް ވާހަކަ ދައްކާއިރު، Tailwind CSS ވެފައިވަނީ ގިނަ ޑިވެލޮޕަރުންނަށް ގޯ ޓު ސޮލިއުޝަނަކަށެވެ.

އެއިން ލިބޭ ފަސޭހަކަމާއި، އުފެއްދުންތެރިކަމާއި، ބޭނުންކުރުމަށް ފަސޭހަވުމަކީ ޒަމާނީ ވެބް ޑިވެލޮޕްމަންޓްގައި އަގުހުރި އެއްޗެއްކަން ސާބިތުވެފައިވެއެވެ.

އެހެންނަމަވެސް ކޮންމެ ޓޫލެއް ފަދައިން، އޭގެ އެންމެ ބޮޑު ފައިދާއެއް ހޯދުމަށްޓަކައި، Tailwind CSSގެ އެންމެ ރަނގަޅު އުސޫލުތައް ވިސްނައި އެއަށް އަމަލުކުރުމަކީ ވަރަށް މުހިންމު ކަމެކެވެ.

މިއިން ބައެއް އުކުޅުތަކުގެ ތެރެއަށް ފީނައިލަމާ ހިނގާށެވެ.

1. ޔުޓިލިޓީ-ފަސްޓް ފަންޑަމަންޓަލްސް

ޔުޓިލިޓީ ފަސްޓް ފަލްސަފާއަކީ Tailwind CSSގެ މައިގަނޑު އުސޫލެއް ކަމަށާއި، އޭގެ މަގުސަދަކީ ކުރިން ޑިޒައިންކޮށްފައިވާ ކޮމްޕޯނެންޓްތަކުގެ ބަދަލުގައި ލޯ ލެވެލް ޔުޓިލިޓީ ކްލާސްތަކާއެކު ޑިވެލޮޕަރުން ބާރުވެރިކުރުވުމެވެ. މިގޮތަށް ކަންތައް ކުރުމަކީ ފުރަތަމަ ފަހަރަށް ތިބާގެ އެޗްޓީއެމްއެލްގެ ވާރބޮސިޓީގެ ސަބަބުން އުނދަގޫ ކަމެއް ކަމުގައި ހީވެދާނެއެވެ؛ އެހެންނަމަވެސް، އެއްފަހަރު ވިސްނިއްޖެނަމަ، ރެޕިޑް ޕްރޮޓޯޓައިޕިންގ އާއި ޕްރޮޑަކްޝަން ލެވެލް ކަސްޓަމައިޒޭޝަން އަށް މަގުފަހިކޮށްދެއެވެ.

ޔުޓިލިޓީ ފަސްޓް އަރކިޓެކްޗަރ އެއްގައި ކޮންމެ ކްލާހެއް ދިމާވަނީ ވަކި ސްޓައިލް އެޓްރިބިއުޓަކާއެވެ. މިސާލަކަށް ޓެކްސްޓް-ސެންޓަރ ކްލާސް އިން ތިބާގެ ޓެކްސްޓް ސެންޓަރަށް އެލައިން ކުރާއިރު، bg-blue-500 އިން ތިބާގެ އެލިމެންޓަށް ވަކި ޝޭޑެއް ދޭނީ ބްލޫ ބެކްގްރައުންޑުންނެވެ.

މި އުސޫލުގެ ސަބަބުން ކޮމްޕޮނެންޓް ރީޔޫޒަބިލިޓީ ޕްރޮމޯޓްކޮށް، ލިޔާ CSSގެ މިންވަރު މަދުވެ، ސްޕެސިފިކްޓީ ވާރސް އަދި ޑެޑް ކޯޑް އެލިމިނޭޝަން ފަދަ އާންމު މައްސަލަތައް ނައްތާލެވޭނެއެވެ.

2. ރެސްޕޮންސިވް ޑިޒައިން

Tailwind CSS އަކީ ވެސް ރެސްޕޮންސިވް ޑިޒައިންގައި މޮޅު ކުޅުންތެރިއެކެވެ. އެއީ މޯބައިލް ފަސްޓް ބްރޭކްޕޮއިންޓް ސިސްޓަމެއް ބޭނުންކުރާ އެއްޗެއް ކަމަށާއި މާނައަކީ ކުދި ސްކްރީންތަކަށް އަމަލުކުރާ ސްޓައިލްތައް ބޮޑެތި ސްކްރީންތަކަށް ފަސޭހައިން ކެސްކޭޑް ކުރެވޭނެ ކަމަށެވެ. މިކަން ކުރެވޭނީ ތިބާގެ ޔުޓިލިޓީ ކްލާސްތަކުގެ ކުރިން sm:، md:، lg:، އަދި xl: ފަދަ ސާދާ ޕްރިފިކްސް ބޭނުންކޮށްގެންނެވެ.

މިސާލަކަށް md:text-center އިން ޓެކްސްޓް-ސެންޓަރ ކްލާސް އެޕްލައި ކުރާނީ ހަމައެކަނި މީޑިއަމް އަދި ބޮޑެތި ސްކްރީންތަކުގައެވެ. މިއީ ތަފާތު ސްކްރީން ސައިޒްތަކަށް އިންޓިއުޓިވްކޮށް ޑިޒައިން ކުރެވޭނެ ގޮތް ހެދުމުން، Tailwind އާއި އެކު ރެސްޕޮންސިވް ޑިޒައިން އަކީ ފަސޭހަ ކަމެކެވެ.

3. ސްޓައިލްތައް އަލުން ބޭނުންކުރުން

ޔުޓިލިޓީ ފަސްޓް އިން ސީދާ އެޗްޓީއެމްއެލް އަށް ސްޓައިލްތައް އެޕްލައި ކުރުމަށް ހިތްވަރު ލިބޭއިރު، ޔުޓިލިޓީތަކުގެ ކޮމްޕްލެކްސް ކޮމްބިނޭޝަންތައް ތަކުރާރު ކުރުމަކީ އުނދަގޫ ކަމަކަށް ވެދާނެ އެވެ. މިތަނުގައި، Tailwindގެ @apply ޑިރެކްޓިވް ވެގެންދަނީ ލައިފްސޭވަރަކަށް ކަމުން، ކަސްޓަމް CSS ކްލާސްތަކަށް ތަކުރާރުކޮށް ސްޓައިލްތައް ނެގޭނެއެވެ.

މިސާލަކަށް ގިނައިން bg-red-500 text-white p-6 ގެ ކޮމްބިނޭޝަން ބޭނުންކުރާނަމަ، .error ފަދަ އާ ކްލާހެއް އުފައްދައި، މި ސްޓައިލްތައް އަލުން ބޭނުންކުރުމަށް @apply ބޭނުންކުރެވިދާނެއެވެ. މިއީ ކޯޑް ކިޔޭނެ ގޮތާއި ބެލެހެއްޓޭނެ ގޮތް އިތުރުކޮށްދޭ ކަމެކެވެ.

4. ކަސްޓަމް ސްޓައިލްސް އިތުރުކުރުން

Tailwind CSS އާއި އެކު ޔުޓިލިޓީ ކްލާސްތަކުގެ ފުޅާ ދާއިރާއެއް ލިބުނު ނަމަވެސް، ވަކި ޝަރުތުތަކަކަށް ކަސްޓަމް ސްޓައިލްތައް ބޭނުންވެދާނެއެވެ. Tailwind އިން އޭގެ ކޮންފިގްރޭޝަން ފައިލް، tailwind.config.js މެދުވެރިކޮށް ފުޅާދާއިރާއެއްގައި ކަސްޓަމައިޒޭޝަން އޮޕްޝަންތައް ފޯރުކޮށްދެ އެވެ.

ޑިފޯލްޓް ކޮންފިގްރޭޝަން އިތުރުކޮށް، ކަސްޓަމް ކުލަތަކާއި، ބްރޭކްޕޮއިންޓްތަކާއި، ފޮންޓްތަކާއި، އަދިވެސް އެތައް ކަމެއް އުފެއްދިދާނެއެވެ. ނަމަވެސް ކޮންފިގްރޭޝަން ފައިލް ބްލޮޓް ނުވާނެހެން މި ފީޗާ މަދުކޮށް ބޭނުންކުރުން މުހިންމެވެ.

5. ފަންކްޝަންސް އެންޑް ޑިރެކްޓިވްސް

Tailwind CSS އިން ތިބާގެ ޑިވެލޮޕްމަންޓް ތަޖުރިބާ އޮމާން ކުރުމަށްޓަކައި ބައެއް ފަންކްޝަންތަކާއި ޑިރެކްޓިވްސް ފޯރުކޮށްދެއެވެ. މިސާލަކަށް ތީމް() ފަންކްޝަންގެ ސަބަބުން ސީދާ CSSގައި ކޮންފިގްރޭޝަން ވެލިއުތަކަށް އެކްސެސް ކުރެވޭއިރު، ޑައިނަމިކް ސްޓައިލިންގ އަށް މަގުފަހިވެއެވެ.

މީގެ އިތުރުން @responsive، @variants، އަދި @apply ފަދަ Tailwindގެ ޑިރެކްޓިވްތަކުގެ ސަބަބުން ރެސްޕޮންސިވް، ސްޓޭޓް ވެރިއަންޓްސް އުފެއްދުމާއި، ތަކުރާރުކޮށް ސްޓައިލްތައް ނެގޭނެ އެވެ. މި ފަންކްޝަންތަކާއި ޑިރެކްޓިވްތައް އެކަށީގެންވާ ގޮތެއްގައި ބޭނުންކުރުމަކީ ޑިވެލޮޕްމަންޓް ޕްރޮސެސް އަވަސްވެ، ކޯޑްބޭސް އިންތިޒާމުކޮށް ބެހެއްޓޭނެ ކަމެކެވެ.

6. ހޯވަރ، ފޯކަސް، އަދި އެހެނިހެން ސްޓޭޓްސްތައް ބެލެހެއްޓުން

Tailwind CSS ވިދާލާ އަނެއް ދާއިރާއަކީ ތަފާތު އެލިމެންޓް ސްޓޭޓްތައް ހެންޑްލް ކުރުމެވެ. ހޯވަރ، ފޯކަސް، އެކްޓިވް، އަދި އެހެނިހެން ސްޓޭޓްތަކުގައި ސްޓައިލްތައް އެޕްލައި ކުރުމަކީ ޔުޓިލިޓީ ކްލާހުގެ ކުރިއަށް ސްޓޭޓް ނަން ޖަހާ ފަދަ ފަސޭހަ ކަމެކެވެ.

މިސާލަކަށް hover:bg-blue-500 އިން bg-blue-500 ކްލާސް އެޕްލައި ކުރާނީ އެލިމެންޓް ހޯވަރ ކުރާއިރުގައެވެ. މި ޕްރިފިކްސްތަކުގެ ސަބަބުން އެކި ސްޓޭޓްތަކުގައި އެލިމެންޓްތައް އުޅޭ ގޮތުގެ މައްޗަށް މަތީ ފެންވަރެއްގެ ކޮންޓްރޯލެއް ލިބިގެންދާއިރު، މިއީ ތިބާގެ ސައިޓްގެ ޔޫޒަރ އެކްސްޕީރިއަންސް އިތުރުކޮށްދޭ އެއްޗެކެވެ.

ނިންމާލަމުން ދަންނަވާނަމަ، މި Tailwind CSS ބެސްޓް ޕްރެކްޓިސްތަކަށް މޭސްތިރިވުމަކީ ތިބާގެ ވެބް ޑިވެލޮޕްމަންޓް ޕްރޮސެސް ވަރަށް ބޮޑަށް ކުރިއަރުވާލެވޭނެ ކަމެކެވެ. ޔުޓިލިޓީ ފަސްޓް އެޕްރޯޗެއް، ސްޓައިލްތަކާއި، ކަސްޓަމައިޒޭޝަންތަކާއި، ވެލް ހެންޑްގެ ފައިދާހުރި ގޮތެއްގައި އަލުން ބޭނުންކުރުމާ ގުޅިގެން

ޑިވްމެޖިކް އިން Tailwind CSS ވޯކްފްލޯ ރަނގަޅު ކުރާށެވެ

Tailwind CSS ވޯކްފްލޯ ރަނގަޅު ކުރަން ބޭނުންނަމަ، Tailwind CSS ކްލާސްތައް ސީދާ ބްރައުޒާއިން ކޮޕީކޮށް ކޮންވަރޓް ކުރެވޭ ބްރައުޒާ އެކްސްޓެންޝަނެއް ޑިވްމެޖިކް އަށް ބަލާށެވެ.

Chrome:ކްރޯމް އަށް އިންސްޓޯލް ކުރާށެވެ

Firefox:ފަޔަރފޮކްސް އަށް އިންސްޓޯލް ކުރާށެވެ

ފީޑްބެކް ލިބިއްޖެތޯ ނުވަތަ މައްސަލައެއް ދިމާވެއްޖެތަ؟ އަޅުގަނޑުމެންގެ ޕްލެޓްފޯމް މެދުވެރިކޮށް އަޅުގަނޑުމެންނަށް އަންގާލަދެއްވާ، އަދި ބާކީ ހުރި ކަންތައްތައް އަޅުގަނޑުމެން ޙަވާލުކުރާނަން!