How to Design a Custom Tailwind CSS Component

Pubblicato il: 02 aprile 2022
sul canale di: williamsk
1,052
28

📃 In this tailwindcss tutorial video. We take the first step in understanding how to dissect a mockup or component idea, into a basic box modelling state, then a semantic html layout, and finally look at iterations that adopt the use of emmet syntax to make coding this and future components light work.

This tailwind css tutorial is foundational. You will learn and understand how to take a logical approach to create tailwindcss components for future code and development when using the tailwindcss framework.

🔔 SUBSCRIBE 🔔

💞    / williamsk  

😍 FOLLOW

☕️ Coffee buymeacoffee.com/williamsk
➡️ Twitter:   / willeumsk  
➡️ Facebook:   / willeumsk  
➡️ Instagram:   / willeumsk  
➡️ TikTok:   / willeumsk  

--- Steps to creating a custom tailwind css component ---

0:00 Intro
0:07 What we're building
1:14 The mockup
2:36 box model layout
5:13 Html Iteration
8:48 basic emmet Layout
12:09 Nested emmet Layout
16:10 Theory Key Points
17:04 Final Recap
18:42 Closing Remarks

💎 RELATED 💎

Not familiar with using tailwindcss?

Check out our create with tailwind css playlist https://youtube.williamsk.com/o1s. It will help you build a solid foundation when using tailwind css and css framework-related topics. If you need to up your tailwind knowledge while getting inside tips then our let's create with tailwindcss series will help you get caught up.


⏰ RELEASE SCHEDULE ⏰

📼 New lessons bi-weekly!
📺 Monthly Series
📆 Release Days - Mondays and Wednesdays

💬 LEAVE A COMMENT 💬

Do you have any questions, tips, or ideas about using Tailwindcss?
Let us know if you learned something new about how to use tailwind in the comments section below!

🔥 ABOUT US 🔥

williamsk is an educational platform about coding, digital development, and creativity. This channel is dedicated to helping you learn by providing instructional content for beginners, developers— and enthusiasts.

You will find intuitive, manageable learning content that will help you gain knowledge and understanding of development-related concepts and digital creative techniques.

We hope to get you inspired by accomplishing meaningful real-world tasks. It's time to learn something new.

Learn more about our channel at https://youtube.williamsk.com/0wm

🎵 MUSIC CREDIT 🎵

Intro: Oh My - Patrick Patrikios
Outro: Chef Brian - LATASHA

#tailwind #tailwindcss #components #mockup


In questa pagina del sito puoi guardare il video online How to Design a Custom Tailwind CSS Component della durata di ore minuti seconda in buona qualità , che l'utente ha caricato williamsk 02 aprile 2022, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 1,052 volte e gli è piaciuto 28 spettatori. Buona visione!