อ่านตอนที่ 1ถ้าคุณยังไม่ได้! นี่คือส่วนที่ 2 ของ TailwindCSS ที่ใช้ในเฟรมเวิร์ก React.js ตอนนี้เราได้ติดตั้ง TailwindCSS แล้วเรามาสร้างส่วนประกอบกันเลย คุณสามารถตั้งชื่อแอป create-react-app ของคุณได้โดยส่วนตัวฉันเพิ่งตั้งชื่อของฉันว่า TailwindCSS

ลบโค้ดต้นแบบออกจากไฟล์ App.js ของคุณเราจะใช้ในภายหลัง มาสร้างส่วนประกอบฮีโร่กันเถอะ!

ฮีโร่

ส่วนฮีโร่เป็นสิ่งแรกที่ผู้ใช้ของคุณจะเห็นบนเว็บไซต์ของคุณเพื่อสร้างความประทับใจแรก คุณอาจสังเกตเห็นว่าเว็บไซต์อื่น ๆ จะแสดงโลโก้ที่มีสโลแกนหรือกราฟิกแบบเคลื่อนไหว มาทำโปรเจ็กต์นี้ด้วย Tailwind กัน!

มาสร้างโฟลเดอร์ส่วนประกอบและในนั้นจะเป็นไฟล์ Hero.js ของเรา

ที่นี่เราได้ตั้งค่าพื้นหลังของเราเป็นสีขาวโดยมีความสูงครอบคลุมทั้งหน้าจอ นอกจากนี้เรายังจัดทำขึ้นเพื่อให้ข้อความของเราอยู่กึ่งกลางหน้า ส่งออกและวางไว้ในไฟล์ App.js ของคุณเพื่อให้เราเห็นผลลัพธ์

ตอนนี้มันเป็นแบร์โบนจริงๆงั้นมาสร้างแถบนำทางกันเถอะ! ในคอมโพเนนต์เราจะสร้าง Nav.js เพื่อส่งออกไปยัง App.js

แถบนำทาง

ตอนนี้เราได้เปลี่ยนมันเป็นกล่องแบบยืดหยุ่นที่มีขนาดความกว้างล้อมรอบหน้าจอ นอกจากนี้เรายังได้ตั้งค่าแถบนำทางของเราด้วยความสูง 16 พิกเซลและรายการทั้งหมดที่อยู่ภายในให้อยู่กึ่งกลาง นี่คือสิ่งที่ดูเหมือนตอนนี้:

เพิ่มส่วนอื่น ๆ ของแอปพลิเคชันสไตล์ TailwindCSS พื้นฐานของเราเพื่อให้สามารถเป็นรายการบนแถบได้

ข้อมูล

เราจะจัดทำส่วนข้อมูลต่อไป ส่วนข้อมูลเป็นข้อมูลเกี่ยวกับ บริษัท และสิ่งที่พวกเขานำเสนอในแง่ของผลิตภัณฑ์หรือบริการ คุณอาจเห็นกราฟิกข้างๆสไลด์รูปภาพหรือเส้นตาราง มาสร้างโครงสร้างพื้นฐานก่อนที่จะเพิ่มเข้าไป

เราใช้สไตล์ <div> เดียวกันสำหรับข้อมูลที่มีการเพิ่มเค้าโครงตารางบวกกับข้อความที่ด้านข้าง เราได้ตั้งค่าพื้นหลังเป็นสีดำและให้รายการทั้งหมดอยู่ตรงกลาง เรามีสามกริดในขณะนี้โดยมีการกำหนดระยะห่างด้วยช่องว่าง -6 ในตารางจริงของเราเราได้ตั้งค่าความสูงและความกว้างเป็น 60 พิกเซลรวมทั้งเส้นขอบเพื่อสร้างการแรเงาสามมิติ

แถบนำทางของเราได้รับการแก้ไขบนหน้าจอ! และส่วนข้อมูลจะขึ้นทั้งหน้าจอด้วย เมื่อเพิ่มรายการการนำทางแล้วเราสามารถไปยังส่วนต่างๆของเว็บไซต์ได้ตลอดเวลา

ต่อไปเราจะเพิ่มหน้าติดต่อ

ติดต่อ

หน้าติดต่อมักจะเป็นส่วนสุดท้ายในการส่งคำถามไปยัง บริษัท เราจะสร้างช่องประเภทอินพุตพื้นฐานและเพิ่มสไตล์พื้นฐานบางอย่างเข้าไป

มาตั้งค่าความสูงเป็นหน้าจอ นอกเหนือจากการจัดกึ่งกลางแล้วคราวนี้เราจะเว้นวรรครายการบนแกน x 8 พิกเซลเนื่องจากมีคำอธิบายข้อความอยู่ด้านข้าง นอกจากนี้เราจะกำหนดความสูงและความกว้างของช่องป้อนข้อมูลและปุ่มส่ง ปุ่มถูกวางไว้ที่ด้านล่างของช่องป้อนข้อมูลโดยมี "สัมพัทธ์ w-full bottom-0"

แล้วมันจะออกมาเป็นแบบนี้!

สุดท้ายมาสร้างส่วนท้ายกันเถอะ!

ส่วนท้าย

ส่วนท้ายนั้นเรียบง่ายและจะอยู่ที่ด้านล่างสุดของหน้า เราจะเพิ่มสไตล์และข้อความให้กับมันและ voila

ก็ไม่เลวนะ!

สำหรับตอนที่ 3 เราจะเพิ่มสิ่งต่างๆให้กับไซต์สไตล์ TailwindCSS ของเรา ตั้งแต่โลโก้พื้นหลังผลิตภัณฑ์จำลองพร้อมคำอธิบายภาพเคลื่อนไหว / เอฟเฟกต์และรูปแบบอื่น ๆ