Jifunze TailwindCSS -Lecture 01

Kuchwizzy

Kuchwizzy

JF-Expert Member
Oct 1, 2019
1,072
2,307
Hello World.

Huu uzi ni special kwa Junior front-end developers au experienced back-end developers ambao wanataka kujifunza mawili matatu kuhusu Front-end designs

Pia, ni special kwa wale wote complete beginners wenye interest ya kujifunza web development

Siku ya leo nita introduce new CSS Framework,ambayo kwa maoni yangu ndio CSS Framework nzuri zaidi baada ya Bootstrap

1*iyBVC7kBRCu6bWV3qxyQzw.jpeg

Tailwindcss vs Bootstrap

Tailwindcss ni utility first Css Framework inayokusaidia ku design simple au Complex UI Components kwa kutumia utilities classes zinazokuwa provided na Tailwindcss framework

Kwa ambao hawako familiar na Framework, Framework kwa lugha rahisi ni mfumo unao ku guide wewe kama Front-end developer katika Projects yako...kwa kawaida Framework huwa

Zinakuja na Tools ambazo zipo tayari kutumika katika Project yako yoyote bila haja ya kuanza kila kitu From the Scratch kama ambavyo unafanya kwenye Plain CSS

So CSS Framework zinaondoa Repetitions ya kuandika styles zilezile kwenye kila project utakayoanza...

Nini maana ya Utility First CSS?
Kama umewahi kutumia Bootstrap , Bootstrap ni Popular CSS Framework kwa ajiri ya ku design Responsive websites(Webpages zinazo fit vizuri kwenye kila aina ya user's devices[simu,tablets,au desktop])

Tofauti kubwa ya Tailwindcss na Bootstrap ni kwamba Bootstrap ni Component First methodology,ukisoma documentation ya bootstrap

Bootstrap 4 Docs

Utakutana na list ya default themes na UI components ambazo unaweza kuzitumia kwenye Projects yako kama Cards,Form,Buttons,Badges,Dropdowns,Inputs group etc

Ubaya wa hii approach ya Components First ni kwamba, utaishia kuwa na Projects hata 100 zinazofanana Designs...kwa sababu zote zinatumia Default themes na Components zinazokuja na Bootstrap

Hapa ndipo Tailwindcss ilipokuja,badala ya kukupa lists ya semantic classes za bootstrap zinazoweka default designs katika projects yako , Tailwindcss inakupa low-level Utilities classes

Utilities Classes ni CSS classes zinazofanya kazi moja tu maalum,yaani utility class moja ina kazi moja tu,tofauti na Semantic au High-level classes za bootstrap zinazofanya kazi nyingi


Illustration:
Hizi ni high level classes kwa ajiri ya blue button kwa kutumia boostrap
<button class="btn btn-primary">Submit</button>

Hapo tumetumia classes mbili tu za bootstrap, class ya kwanza ni btn kwa ajiri ya ku add default styles kwa button yetu
Then class ya pili ni btn-primary kwa ajiri ya ku add blue color kwenye button yetu...lakini hizo classes mbili zinafanya kazi kubwa kuliko nilizozitaja hapo....bado zita add margin,padding,rounded corners na color ya text na on hover state katika button yako out of box!!....ni jambo zuri kwa kuwa zinarahisisha kazi lakini zinaweka ugumu kwenye ku customize hii button

Hizi ni low level utilities classess kwa ajiri ya button kwa kutumia Tailwindcss

<button class="bg-blue-600 hover:bg-blue-600 text-white py-2 px-2 rounded">Submit</button>]
:Demo & source code

This time tuna utilities classes sita,tofauti na boostrap semantic classes,kila utility classses hapa ina kazi yake
bg-blue-600 ni utility class inayo add blue background color kwenye button yetu,600 ina stands for intensity ya background color yetu
Click to expand...

so tunaweza ku change mng'ao au wa rangi yetu from 0 to 900,tofauti na btn-primary class ya bootstrap ambayo haikupi control ya ku change intensity ya rangi katika button

hover:bg-blue-600 hii utility class kazi yake ni add background color ya blue na intensity ile ile ya 600 pindi cursor inapokuwa juu ya button yetu
Click to expand...

Tofauti na bootstrap classes ambazo zinakuja na default design yake,that is hatuna uwezo wa kuchange background color pindi cursor inapokuwa juu ya button yetu

kama tumetumia bootstrap classes ,katika case ya tailwindss utilities classes tunaweza

Kwa mfano tukitaka background color iwe ya orange badala ya blue on hover,tunachange color na intensity tu
Eg.hover:bg-orange-600

text-white ina add color ya text katika button yetu,white color
py-2 ina add padding top na padding down
px-2 pia ina add padding left na padding right
rounded ina add rounded corners katika button yetu
Click to expand...

Kitu kizuri kuhusu Tailwindcss unaweza hisi kuwa kwa kuwa tumetumia classes sita katika Tailwindcss na mbili tu kwa Bootstrap basi File size ya Tailwindcss itakua kubwa kuliko File size ya Bootstrap,ukweli ni vice versa


Itaendelea...

+255748333586
 
Mleta mada safi sana!!

Nilitamani sana kujifunza hii tailwind css lakini sikupata muda mzuri, kwa kweli ukiona akina Otwel wanavyoitumia kwenye Laravel inapendeza hakika!!

Tailwind ni tofauti kabisa na bootstrap na ninadhani huko mbeleni itareplace bootstrap completely!!

Sema shida ndogo ya Tailwind, inaonekana ina tabu kidogo kwenye kuinstall tofauti na bootstrap ambayo unadownload tu files!!

Ninasubiria Tutorial 2 kwa hamu sana!!
 
mpatto said:
Mleta mada safi sana!!

Nilitamani sana kujifunza hii tailwind css lakini sikupata muda mzuri, kwa kweli ukiona akina Otwel wanavyoitumia kwenye Laravel inapendeza hakika!!

Tailwind ni tofauti kabisa na bootstrap na ninadhani huko mbeleni itareplace bootstrap completely!!

Sema shida ndogo ya Tailwind, inaonekana ina tabu kidogo kwenye kuinstall tofauti na bootstrap ambayo unadownload tu files!!

Ninasubiria Tutorial 2 kwa hamu sana!!
Click to expand...
Mpatto safi kwa Feedback,mara nyingi tunapo andaa mada kama hizi huwa tunaanza kidogo then tunaangalia response ya wachangiaji
Unaweza jikuta unajifundisha mwenyewe...wachangiaji hakuna

Ila unapoona kuna watu kweli wanahitaji darasa...inakupa moyo wa ku keep going

Utilities classes za Tailwindcss ni more powerful kuliko semantic classes za Bootstrap zinakupa uwezo wa Implement your own unique design tofauti na Bootstrap....ni rahisi sana kujua site hii imetengenezwa kwa bootstrap bila hata ku inspect sourcecode zake....tofauti na Tailwindcss

Kwenye hii Lecture tutaenda step by step kwanzia Installation,Text Editor,Utilities classes,Responsive design katika Tailwindcss na tuta design Telegram clone kwa kutumia Tailwindcss alone
 
Kuchwizzy said:
Mpatto safi kwa Feedback,mara nyingi tunapo andaa mada kama hizi huwa tunaanza kidogo then tunaangalia response ya wachangiaji
Unaweza jikuta unajifundisha mwenyewe...wachangiaji hakuna

Ila unapoona kuna watu kweli wanahitaji darasa...inakupa moyo wa ku keep going

Utilities classes za Tailwindcss ni more powerful kuliko semantic classes za Bootstrap zinakupa uwezo wa Implement your own unique design tofauti na Bootstrap....ni rahisi sana kujua site hii imetengenezwa kwa bootstrap bila hata ku inspect sourcecode zake....tofauti na Tailwindcss

Kwenye hii Lecture tutaenda step by step kwanzia Installation,Text Editor,Utilities classes,Responsive design katika Tailwindcss na tuta design Telegram clone kwa kutumia Tailwindcss alone
Click to expand...
Mkuu Kuchwizzy tupo pamoja sana!!

Binafsi ninaitamani sana Tailwind!!

Ila inaonekana learning curve yake ni kubwa sana, ingawa inaeleweka!!

Labda naomba kuuliza, tailwind inaweza kuwa na modals!? Au nazo unazitengeneza kwa utility!? Au unatumia thirdpart library ili kuzitokeza!?
 
TAILWINDCSS LECTURE 02

Vipengele muhimu tutakavyo deal navyo katika hii Lecture ni

  1. Set up the Environment
  2. Installing Tailwindcss
  3. Installing Live-server
  4. Hello World
1.Set up the Environment

Hii section itakua fupi sana,na assume tayari utakua na Text Editor of your Choice katika Desktop au PC yako
Kwa complete Beginner,Text Editor ni special Application inayokuwezesha kuandika codes zako....ni kama Microsoft word
kwa ajiri ya kuandika programs au Coding

Personally na recommend Visual Studio Code,though upo free kutumia text editor uliyoizoea kama Atom,Sublime text etc.
Download Visual Studion Code hapa

Pia tunahitaji npm
Kwa wasio fahamu maana ya npm,hii concept itawapa mwanga......Zamani kama tunataka kutumia let's say bootstrap katika project yetu
Chukulia mfano Bootstrap 3,tulikua tuna download files za bootstrap na kuzi add katika root directory ya project yetu manually....Hii approach ilikua na shida....kwa mfano utapotaka ku upgrade version ya Bootstrap say version 4, itakulazimu tena kurudia process ile ile manually
Na hio ni kwa project yenye dependency moja..yaani Bootstrap
Vipi kama una design complex project inayohitaji 100 au 1000 of dependencies?

Hapa ndipo zilipokuja Dependency managers kama Composer kwa PHP na npm kwa Javascript
So kwa ufupi npm (node package manager) ni special software inayo handle all of our project's dependencies kama vile(ku install na update dependencies )
So hatuna haja ya ku download files manually files zote za Tailwindcss na kuzi add katika project yetu manually...............

npm tuna install kwa urahisi,kwa ku download Node.js
Download Node.js hapa
Kwa complete beginner au non Javascript developer,Nodejs ni Javascript Engine inayokuwezesha ku run codes za Javascript nje ya web browser..
Ili undwa 2009 na Google Engineer Ryan Dahl on the top of chromeV8(Javascript Engine inayotumiwa na Chrome)

Baada ya ku download Visual Studio Code na Node.js tutakuwa tume set mazingira sawa...kabla hatuja install Tailwindcss
Kwanini tunahitaji npm? kwasababu Tailwindcss itakuja kwetu kama Javascript Package....

npm tutaitumia sio tu ku install Tailwindcss...bali tutaitumia kwa kila Javascript packages tunayohitaji katika project yetu

Ku test kama Node.js na npm zipo kwenye Machine yako....Fungua Command Prompt au Gitbash na type hizi command

>node -v
Hii command itakupa version ya Node.js uliyotoka ku download
>npm -v
Hii command itakupa version ya npm iliyokuja na Nodejs

NB: v ina stand for version...


2.INSTALLING TAILWINDCSS

Baada ya ku install Node.js pamoja na npm,sasa ni mda wa ku install Tailwindcss...
Cha kwanza tutafungua Empty folder ambalo lita hifadhi ma files yetu yote ya project(Yaani root directory)
So fungua command prompt (Nisameheni...na assume wote mnatumia window) na type hii command

>mkdir myProject
Hii command itatengeneza empty folder nililolipa jina la myProject(in camel casing)......unaweza kulipa jina lolote lile isipokuwa "tailwindcss" nitakwambia kwanini.....

Then type hii command
>cd myProject
Hapa tupo ndani ya Root directory ama parent folder la project yetu..
Tutakachofanya niku initialize project yetu kwa kutengeneza package.json file
Kwa non javascript developers,package.json file ni special file katika project yetu lenye metadata zinazohusu project yetu...
Kama vile description ya project yetu,version,author,number of dependencies etc.....

Tukiwa ndani ya parent folder type hii command
>npm init
Utaletewa options za kujaza kama vile package name,description,author,version,LICENCE etc...
For simplicity tutatumia default options so endelea ku click ENTER mpaka options ya mwisho inayokuhitaji ku confirm...just type yes
Then now,tuta install tailwindcss na ku save kama dependency ya project(Ni dependency kwa maana ya kwamba project yetu inategemea tailwindcss)

>npm install tailwindcss --save-dev-
baada ya installation utaona folder mpya ya node_modules ndani ya parent folder lako....na file la package-lock.json

Fungua parent folder yako kwa kutumia Text Editor of your choice
Kama unatumia Visual Studion code..Type hii command

>Code .
Hii command itafungua parent folder in my case,myProject Folder ndani ya Visual Studio Code.....

Baada ya kufungua parent folder,ndani ya Parent folder create new folder then lipe jina la css....au jina lolote litakalo kuwa relevant kwako Eg
style...
Then ndani la folder ilo,assume umelipa jina la 'css'...tengeneza new file lipe jina la styles.css au jina lolote litakalokuwa relevant kwako..

Baada ya hapo fungua hilo file la styles.css(na assume umelipa jina hilo) then add hizi Tailwindcss directives

(Ndani ya styles.css file)

@tailwind base;
@tailwind components;
@tailwind utilities;

Baada ya hapo fungua folder ulilotengeneza la css...(na assume umelipa jina hilo) kwa kutumia Command
Yaani type
>cd css
kisha type hii command

>npx tailwind build styles.css -o output.css
Hii command itatengeneza file jipya lenye jina la output.css ndani ya folder letu la css
Mpaka hapa tutakuwa tumemaliza installation ya Tailwindcss.....

3.INSTALLING LIVE-SERVER
Live server ni nini?
Live server ni web server yenye uwezo wa live reloding....yaani hatuna haja tena ya ku refresh page everytime tunavyo make changes katika
code zetu...
Baada ya ku install na ku run Live-server...live server itakua na jukumu la kupitia codebase yetu kila wakati na ku update changes kwenye browser kama zipo...
Kwa wale React developer watanielewa...
So ku install Live server type hii command kwenye new window ya Command prompt au Gitbash

>npm install -g live-server
Kwa kutumia -g flag..tume install live server globally...so tunaweza itumia kwa kila project itakayohitaji live reloading..

3.HELLO WORLD
Baada ya steps zote hizo sasa ni mda wa kui test tailwindcss.....
create new file ndani ya parent folder yako,in my case myProject folder..then lipe jina la index.html

Hizi ni boiler plate codes za kuanza nazo
<!DOCTYPE html> <html lang="en"> <head> <title>Hello World</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/output.css"> </head> <body> </body> </html>
Katika head tags...utaona tumeli point output.css file..ndo file lenye classes na styles za Tailwindcss
Ndani ya parent folder....create new folder lipe jina la assets...ndani ya assets tengeneza folder jingine lipe jina la svgs...
Then ingia hii website download svg image yenye jina la 'Designer Life'

undraw.co
Kwa designers....undraw.co ni best platform inayokupa unique na amazing svg images illustrations for free unazoweza kuzitumia katika project yako...

Baada ya ku download hio svg....ihifadhi kwenye svgs folder ulilotoka kulitengeneza....i rename hio svg kama 'designer-life'

Then update index.html file to
<!DOCTYPE html> <html lang="en"> <head> <title>Hello World</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/output.css"> </head> <body> <div class="bg-blue-900 text-white"> <div class="flex items-center m-6"> <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg> <span class="text-xl font-semibold">Tailwindcss</span> </div> <p class="text-4xl text-center font-bold">Hello , World from Tailwindcss</p> <span class="text-sm ml-6 italic">A utility first CSS Framework created by Adam Wathan and Steve Schoger</span> <div class="my-3"> <img src="assets/svgs/designer-life.svg"> </div> </div> </body> </html>
Baada ya hapo...rudi kwenye command prompt au Gitbash window....ukiwa katika parent folder type hii command
>live-server
New browser window itafunguka ikiwa na web page tuliyo i design using tailwindcss
live demo
Itaendelea......
Najua kuna baadhi nitakuwa nimewachanganya sana...but don't worry....nitakuwepo ku solve kila changamoto utakayokutana nayo kwenye kila steps

LECTURE 03:INTRODUCTION TO UTILITIES CLASSES..
Kwa msaada,maoni,maswali au ushahuri kuhusu Programming au web development 255 623 391 590
 
mpatto said:
Mkuu Kuchwizzy tupo pamoja sana!!

Binafsi ninaitamani sana Tailwind!!

Ila inaonekana learning curve yake ni kubwa sana, ingawa inaeleweka!!

Labda naomba kuuliza, tailwind inaweza kuwa na modals!? Au nazo unazitengeneza kwa utility!? Au unatumia thirdpart library ili kuzitokeza!?
Click to expand...
No bootstrap inatumia Jquery na Popper js ku add javascript functionalities katika Components zake kama models,popover na tooltip...ila Tailwindcss yenyewe inakupa utilities classes...just css
 
Kuchwizzy said:
TAILWINDCSS LECTURE 02

Vipengele muhimu tutakavyo deal navyo katika hii Lecture ni

  1. Set up the Environment
  2. Installing Tailwindcss
  3. Installing Live-server
  4. Hello World
1.Set up the Environment

Hii section itakua fupi sana,na assume tayari utakua na Text Editor of your Choice katika Desktop au PC yako
Kwa complete Beginner,Text Editor ni special Application inayokuwezesha kuandika codes zako....ni kama Microsoft word
kwa ajiri ya kuandika programs au Coding

Personally na recommend Visual Studio Code,though upo free kutumia text editor uliyoizoea kama Atom,Sublime text etc.
Download Visual Studion Code hapa

Pia tunahitaji npm
Kwa wasio fahamu maana ya npm,hii concept itawapa mwanga......Zamani kama tunataka kutumia let's say bootstrap katika project yetu
Chukulia mfano Bootstrap 3,tulikua tuna download files za bootstrap na kuzi add katika root directory ya project yetu manually....Hii approach ilikua na shida....kwa mfano utapotaka ku upgrade version ya Bootstrap say version 4, itakulazimu tena kurudia process ile ile manually
Na hio ni kwa project yenye dependency moja..yaani Bootstrap
Vipi kama una design complex project inayohitaji 100 au 1000 of dependencies?

Hapa ndipo zilipokuja Dependency managers kama Composer kwa PHP na npm kwa Javascript
So kwa ufupi npm (node package manager) ni special software inayo handle all of our project's dependencies kama vile(ku install na update dependencies )
So hatuna haja ya ku download files manually files zote za Tailwindcss na kuzi add katika project yetu manually...............

npm tuna install kwa urahisi,kwa ku download Node.js
Download Node.js hapa
Kwa complete beginner au non Javascript developer,Nodejs ni Javascript Engine inayokuwezesha ku run codes za Javascript nje ya web browser..
Ili undwa 2009 na Google Engineer Ryan Dahl on the top of chromeV8(Javascript Engine inayotumiwa na Chrome)

Baada ya ku download Visual Studio Code na Node.js tutakuwa tume set mazingira sawa...kabla hatuja install Tailwindcss
Kwanini tunahitaji npm? kwasababu Tailwindcss itakuja kwetu kama Javascript Package....

npm tutaitumia sio tu ku install Tailwindcss...bali tutaitumia kwa kila Javascript packages tunayohitaji katika project yetu

Ku test kama Node.js na npm zipo kwenye Machine yako....Fungua Command Prompt au Gitbash na type hizi command

>node -v
Hii command itakupa version ya Node.js uliyotoka ku download
>npm -v
Hii command itakupa version ya npm iliyokuja na Nodejs

NB: v ina stand for version...


2.INSTALLING TAILWINDCSS

Baada ya ku install Node.js pamoja na npm,sasa ni mda wa ku install Tailwindcss...
Cha kwanza tutafungua Empty folder ambalo lita hifadhi ma files yetu yote ya project(Yaani root directory)
So fungua command prompt (Nisameheni...na assume wote mnatumia window) na type hii command

>mkdir myProject
Hii command itatengeneza empty folder nililolipa jina la myProject(in camel casing)......unaweza kulipa jina lolote lile isipokuwa "tailwindcss" nitakwambia kwanini.....

Then type hii command
>cd myProject
Hapa tupo ndani ya Root directory ama parent folder la project yetu..
Tutakachofanya niku initialize project yetu kwa kutengeneza package.json file
Kwa non javascript developers,package.json file ni special file katika project yetu lenye metadata zinazohusu project yetu...
Kama vile description ya project yetu,version,author,number of dependencies etc.....

Tukiwa ndani ya parent folder type hii command
>npm init
Utaletewa options za kujaza kama vile package name,description,author,version,LICENCE etc...
For simplicity tutatumia default options so endelea ku click ENTER mpaka options ya mwisho inayokuhitaji ku confirm...just type yes
Then now,tuta install tailwindcss na ku save kama dependency ya project(Ni dependency kwa maana ya kwamba project yetu inategemea tailwindcss)

>npm install tailwindcss --save-dev-
baada ya installation utaona folder mpya ya node_modules ndani ya parent folder lako....na file la package-lock.json

Fungua parent folder yako kwa kutumia Text Editor of your choice
Kama unatumia Visual Studion code..Type hii command

>Code .
Hii command itafungua parent folder in my case,myProject Folder ndani ya Visual Studio Code.....

Baada ya kufungua parent folder,ndani ya Parent folder create new folder then lipe jina la css....au jina lolote litakalo kuwa relevant kwako Eg
style...
Then ndani la folder ilo,assume umelipa jina la 'css'...tengeneza new file lipe jina la styles.css au jina lolote litakalokuwa relevant kwako..

Baada ya hapo fungua hilo file la styles.css(na assume umelipa jina hilo) then add hizi Tailwindcss directives

(Ndani ya styles.css file)

@tailwind base;
@tailwind components;
@tailwind utilities;

Baada ya hapo fungua folder ulilotengeneza la css...(na assume umelipa jina hilo) kwa kutumia Command
Yaani type
>cd css
kisha type hii command

>npx tailwind build styles.css -o output.css
Hii command itatengeneza file jipya lenye jina la output.css ndani ya folder letu la css
Mpaka hapa tutakuwa tumemaliza installation ya Tailwindcss.....

3.INSTALLING LIVE-SERVER
Live server ni nini?
Live server ni web server yenye uwezo wa live reloding....yaani hatuna haja tena ya ku refresh page everytime tunavyo make changes katika
code zetu...
Baada ya ku install na ku run Live-server...live server itakua na jukumu la kupitia codebase yetu kila wakati na ku update changes kwenye browser kama zipo...
Kwa wale React developer watanielewa...
So ku install Live server type hii command kwenye new window ya Command prompt au Gitbash

>npm install -g live-server
Kwa kutumia -g flag..tume install live server globally...so tunaweza itumia kwa kila project itakayohitaji live reloading..

3.HELLO WORLD
Baada ya steps zote hizo sasa ni mda wa kui test tailwindcss.....
create new file ndani ya parent folder yako,in my case myProject folder..then lipe jina la index.html

Hizi ni boiler plate codes za kuanza nazo
DOCTYPE html>
Katika head tags...utaona tumeli point output.css file..ndo file lenye classes na styles za Tailwindcss
Ndani ya parent folder....create new folder lipe jina la assets...ndani ya assets tengeneza folder jingine lipe jina la svgs...
Then ingia hii website download svg image yenye jina la 'Designer Life'

undraw.co
Kwa designers....undraw.co ni best platform inayokupa unique na amazing svg images illustrations for free unazoweza kuzitumia katika project yako...

Baada ya ku download hio svg....ihifadhi kwenye svgs folder ulilotoka kulitengeneza....i rename hio svg kama 'designer-life'

Then update index.html file to
DOCTYPE html> Tailwindcss Hello , World from Tailwindcss A utility first CSS Framework created by Adam Wathan and Steve Schoger [IMG]https://www.jamiiforums.com/assets/svgs/designer-life.svg[/IMG]
Baada ya hapo...rudi kwenye command prompt au Gitbash window....ukiwa katika parent folder type hii command
>live-server
New browser window itafunguka ikiwa na web page tuliyo i design using tailwindcss
live demo
Itaendelea......
Najua kuna baadhi nitakuwa nimewachanganya sana...but don't worry....nitakuwepo ku solve kila changamoto utakayokutana nayo kwenye kila steps

LECTURE 03:INTRODUCTION TO UTILITIES CLASSES..
Kwa msaada,maoni,maswali au ushahuri kuhusu Programming au web development 255 623 391 590
Click to expand...
Mkuu, shukrani sana aisee!! Binafsi nafaidika mno!!

Lakini kabla haujaondoka kwenye hii hatua ya installment, unaweza hata ukatupa hints za kuinstall hii tailwindcss kwenye Laravel au Codeignater!?

Kwa sababu framework hizo hazina node_module folder na zinatumia composer badala ya npm

Asante!
 
mpatto said:
Mkuu, shukrani sana aisee!! Binafsi nafaidika mno!!

Lakini kabla haujaondoka kwenye hii hatua ya installment, unaweza hata ukatupa hints za kuinstall hii tailwindcss kwenye Laravel au Codeignater!?

Kwa sababu framework hizo hazina node_module folder na zinatumia composer badala ya npm

Asante!
Click to expand...
Process ya ku install Tailwindcss katika Laravel ni simple kuliko hizo steps tulizotumia hapo.....
Sijajua kwa Codeignater kwa sababu sio framework niliyowahi kuitumia....
Pia katika ku install Tailwindcss in Laravel still tutatumia npm...
Kumbuka Composer ni kwa ajiri ya PHP Package na Npm ni kwa ajiri ya Javascript Package....

Sijajua unatumia Version ipi ya Laravel ila kama unatumia Laravel 7.....
Install hii package kwa kutumia Composer kwenye root directory ya Project yako

composer require laravel-frontend-presets/tailwindcss --dev

Then ku create basic Authentication Scaffolding kwa kutumia Tailwindcss...(Login and Register views)
Type
php artisan ui tailwindcss --auth
Then save dependencies by
npm install && npm run watch

Kuiondoa Bootstrap type
npm remove bootstrap
 
Kuchwizzy said:
Process ya ku install Tailwindcss katika Laravel ni simple kuliko hizo steps tulizotumia hapo.....
Sijajua kwa Codeignater kwa sababu sio framework niliyowahi kuitumia....
Pia katika ku install Tailwindcss in Laravel still tutatumia npm...
Kumbuka Composer ni kwa ajiri ya PHP Package na Npm ni kwa ajiri ya Javascript Package....

Sijajua unatumia Version ipi ya Laravel ila kama unatumia Laravel 7.....
Install hii package kwa kutumia Composer kwenye root directory ya Project yako

composer require laravel-frontend-presets/tailwindcss --dev

Then ku create basic Authentication Scaffolding kwa kutumia Tailwindcss...(Login and Register views)
Type
php artisan ui tailwindcss --auth
Then save dependencies by
npm install && npm run watch

Kuiondoa Bootstrap type
npm remove bootstrap
Click to expand...
Natumia Laravel 7...

Kumbe hii tailwindcss tayari ni part ya laravel frontend scaffolding!!?

Aisee, hii sikujua mkuu, nashukuru sana!!
 
Mkuu Hongera Kwa Kazi Nzuri.
Mimi Sina Utaalamu Na Hii Kitu,Ila Natamani Kujifunza Na Sijui Pa Kuanzia.
Naomba Mwongozo Nawezaje Kujifunza Computer Programming Bila Ya Kuingia Darasani.
 
TarimoJr said:
Mkuu Hongera Kwa Kazi Nzuri.
Mimi Sina Utaalamu Na Hii Kitu,Ila Natamani Kujifunza Na Sijui Pa Kuanzia.
Naomba Mwongozo Nawezaje Kujifunza Computer Programming Bila Ya Kuingia Darasani.
Click to expand...
Huna ulazima wa kuingia darasani kujua Programming....

Kinachohitajika na kuipenda....
Kama una Computer yako iwe PC au Desktop hio ni hatua ya pili...

Cha tatu ni kuchagua Sector ipi ya Computer Programming uta focus nayo....
Either Web Programming, App Development, Data Science etc..

Baada ya hatua hio...uta list technologies ambazo zipo kwenye hio sector....utajifunza

Kwanzia Programming languages, Libraries, Frameworks


My favorite language ni Python... Ni language nzuri mno kama unaanza career.....
 
You must log in or register to reply here.

Similar Discussions

Back
Top Bottom
Forums
New posts
Post thread
Back