Build a Responsive Timeline Design using Tailwind CSS

Поділитися
Вставка
  • Опубліковано 19 вер 2024
  • Build a completely responsive timeline design with Tailwind CSS. Learn about the useful Tailwind utilities, customizing the framework, responsive design using Tailwind, extracting classes using @apply directive and so much more.
    Starter Template GitHub Repository: github.com/Thi...
    Source Code: github.com/Thi...
    Subscribe and stay tuned for tips, tutorials and more.
    Follow me on Twitter: / shrutibalasa
    Follow Thirus on Twitter: / thirusofficial
    Visit my website: www.shrutibala...
    #Tailwind #TailwindCSS

КОМЕНТАРІ • 43

  • @partabparmar5537
    @partabparmar5537 Рік тому +1

    thank you so much mam............thats really greate

    • @Thirus
      @Thirus  Рік тому +1

      You’re welcome!

  • @rehman90
    @rehman90 2 роки тому +1

    I love the way you teach. it's simple yet effective, especially for a beginner like me. btw I have a suggestion to use [ ] for a value which is not in given classes. say left-[6.50rem] instead to define the size in tailwind config file.

    • @Thirus
      @Thirus  2 роки тому

      Yes, back then - when I created this video, Tailwind CSS didn’t have this feature of arbitrary values.

  • @tunji_xy
    @tunji_xy 3 роки тому +2

    This is really nice. Keep up the good work.

    • @Thirus
      @Thirus  3 роки тому

      Thank you :)

  • @musicjhkash3972
    @musicjhkash3972 2 роки тому +1

    Thanks for your video 😊 this video most helpful for my present project in company.thanks a lot

    • @Thirus
      @Thirus  2 роки тому

      Glad to hear that 😊

  • @jarnoruuskanen
    @jarnoruuskanen Рік тому +1

    Excellent tutorial, thank you!

    • @Thirus
      @Thirus  Рік тому +1

      You’re welcome!

  • @HolmesPatrick
    @HolmesPatrick 3 роки тому +1

    Very good videos , congratulations for sharing good knowledge

    • @Thirus
      @Thirus  3 роки тому

      Thank you! 😊

  • @sachinpandey7751
    @sachinpandey7751 Рік тому +1

    thankyou so much

    • @Thirus
      @Thirus  Рік тому

      You’re welcome!

  • @marimuthur9456
    @marimuthur9456 2 роки тому +1

    Your really cool it's a clear explanation video thank you so much 👌🏼👌🏼👌🏼

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome :)

  • @pluscday2
    @pluscday2 3 роки тому +1

    from taiwan. thanks for your video

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome 😊

  • @robat_lol
    @robat_lol 3 роки тому +1

    Hey, you make GREAT videos! Thank you!

    • @Thirus
      @Thirus  3 роки тому

      Thanks Robert 😊

  • @develo777
    @develo777 2 роки тому +1

    thanks you so much!! that's really great!

    • @Thirus
      @Thirus  2 роки тому

      You’re welcome :)

  • @alfiankurniadi6216
    @alfiankurniadi6216 3 роки тому +4

    Your tailwindcss tutorials are top notch! How long have you been using tailwind? You're doing it so fast and fluently like it's your second nature lol.

    • @Thirus
      @Thirus  3 роки тому +2

      Actually not too long. Have used it in 3-4 projects and few such modules. It’s gonna happen to you too if you work on a few projects with Tailwind CSS continuously.
      But thank you 😊

  • @RobertMcGovernTarasis
    @RobertMcGovernTarasis 2 роки тому +1

    That was interesting and you certainly flew through it. You’ve certainly convinced me to give Tailwind a try, esp with seeing you can have class styles in a separate file. (I am not a fan of overly cluttering the html which has put me off really looking at Tailwind or Bootstrap). Were you using a cheat sheet of some type to quickly know that left-17 should be 68px? (Or is it simply times 4?)

    • @Thirus
      @Thirus  2 роки тому +1

      Initially I was also uncomfortable looking at so many classes in HTML. But most of us get used to it after a while.
      No cheat sheet, it is times 4

  •  3 роки тому +1

    Thank you

  • @Axel-wm8cf
    @Axel-wm8cf Рік тому +1

    gooooooooooooooooooooooooooooooooooooooooooooooooooooooooooood

    • @Thirus
      @Thirus  Рік тому

      Thaaaaaank you

  • @piyushbora4763
    @piyushbora4763 2 роки тому +1

    Amazing videos!
    Can u tell me how to add that xs breakpoint in tailwind v3?

    • @Thirus
      @Thirus  2 роки тому +1

      Hi Piyush, it’s the same in v3 also. If it’s not working, feel free to DM on Twitter @shrutibalasa

    • @piyushbora4763
      @piyushbora4763 2 роки тому +1

      @@Thirus thank you very much!

  • @viveksingh9108
    @viveksingh9108 2 роки тому +1

    Hello didi my code gets so mess up due to long long lines of tailwind css. I want to write my tailwind code into a separate css file. How can I do it ? I am searching on net but unable to find solution please help me

    • @Thirus
      @Thirus  2 роки тому +1

      If you write Tailwind in a separate CSS file, the whole point of Tailwind is lost. Instead try and use something like Eleventy that helps you create components. The code looks less messy. Check out this tutorial: ua-cam.com/video/VcW3T9EOo5M/v-deo.html

    • @viveksingh9108
      @viveksingh9108 2 роки тому +1

      @@Thirus Thank u did for ur quick response

  • @luismoriguerra669
    @luismoriguerra669 3 роки тому

    amazing!

  • @abdiazismaxamed7665
    @abdiazismaxamed7665 Рік тому +1

    From somali🇸🇴 thanka sister❤
    But if I do a lot of practice, I can't become a master tailwind css
    I love tailwind css
    Iam frontend development
    Sorry for English me hard

    • @Thirus
      @Thirus  Рік тому

      You’re welcome

  • @adisakjantrasopark7672
    @adisakjantrasopark7672 3 роки тому +1

    May teach me about "Tailwind CSS Multi-Column Plugin"

    • @Thirus
      @Thirus  3 роки тому

      Sorry I haven’t used it

  • @njorojohn
    @njorojohn 3 роки тому +1

    Thank you!
    Great tutorial.

    • @Thirus
      @Thirus  3 роки тому

      You’re welcome