switchon@lavalamp.biz
+27(0) 83 419 4851 / +27(0) 21 036 1165
Application & software development
Get A Quote

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact

    • Home
    • Services
      • Application & software development
      • Outsourced software development
      • Project based resourcing
      • Digital marketing & consulting
      • Graphic design & consulting
      • UI / UX design & consulting
      • Recruitment services
      • Lease an expert
    • About
      • How we work
      • NBConsult Group
      • Partners
      • Lightbox Digital
    • Blog
    • Join us
    • Contact
    figure it out
    You’ll Figure It Out…
    Apr 13, 2022
    flask
    Why Is There No Coffee In FLASK?!
    Apr 25, 2022

    TailwindCSS For Faster Front-end Development

    Categories
    • Languages / Tech areas
    • Web Design
    • Web Development
    Tags
    • cascading style sheets
    • css
    • framework
    • Front-End Development
    • Tailwind
    • TailwindCSS
    tailwind css
    tailwind css

    In this blog post I will be diving into the very basics of what TailwindCSS is and hopefully provide some insight as to why I think TailwindCSS is a game changer, so let's get into it.

     

    What is TailwindCSS?

    TailwindCSS is a front-end framework that was made with the intention of speeding up development while abiding to the general CSS rules. This framework is among my favourite. Sure it may involve more coding than others, but it's really simple and easy to read.

    Most frameworks have pre-set classes that allow you to make elements look a specific way. This is where TailwindCSS sets itself apart from the rest. TailwindCSS was built with the mindset of agility, flexibility as well as improving development speed. To me Tailwind stood out as it worked with classes that described the attributes being used quite nicely in a very easy to understand format. For example to set display: flex; on an element you would just add class="flex" and that would apply the exact same CSS rule, although it does not stop there. It would not surprise me that you can create a whole custom built application without having to look at CSS/SCSS code at all. It's really the little things that make this framework a worth while contender.

    TailwindCSS can also make use of PostCSS which is a tool used to convert modern day CSS into something that most browsers won't have an issue running.

     

    Here is an example of TailwindCSS vs. Bootstrap.  (It's important to note that all frameworks have their own use cases).

     

    Bootstrap example:

    For example when it comes to setting colours, bootstrap is very limited.

    To name a few classes that provide colour : (in Bootstrap)

    • bg-dark
    • bg-light
    • bg-primary
    • bg-secondary
    • bg-danger
    • bg-success
    • bg-warning

     

    Here is an example of a Bootstrap class in action:

    <div class="bg-primary">// This will set background to blue
    This is a Bootstrap styled div
    </div>

    (In order to add more colours or change the colour to what you would need it be, you would need to dive into some CSS code. )

     

    TailwindCSS Example:

    TailwindCSS is very versatile in comparison. For example "bg-red" is the same as "background-color: red;" (Background will be set to red). However if you use "bg-red-400" it will use another shade of red instead. On top of all that there are far more colours to choose from when compared to bootstrap.

     

    Here is an example of a TailwindCSS class in action:

    <div class="bg-blue-600">// This will set background to blue but the "-600" defines the shade of blue
    This is a TailwindCSS styled div
    </div>

     

    What perks do you get for using TailwindCSS?

    • For one you get to harness the knowledge from TailwindsCSS's well written documentation which makes it great for CSS beginners as well as CSS masters. There is something for everyone if you invest your time in exploring the documentation.
    • You have the ability to compile all the classes which you would want into one class while adding custom styles to it, with the help from the @apply directive that tailwind includes. This allows you to build a whole new class with new CSS rules.
    • You have the ability to build custom animations which you can then apply to other classes with ease.
    • As mentioned before, you also have access to a lot of colour palettes.
    • Thanks to PostCSS your CSS will be prefixed so that it will run on all browsers.
    • TailwindCSS's documentation also provides a "code pen" of sorts to allow you to test classes out on elements before you make use of them in your application. Here is a link to the playground. Go wild!

    There is just so much more to TailwindCSS that I have not even spoken about. I myself am a novice when it comes to TailwindCSS, but I can see clear benefits from using it.

    I hope this blog post was helpful or educational... Maybe try some TailwindCSS yourself and see what benefits you can get out of it. I know that if I am given the opportunity to use TailwindCSS I will most likely use it.

    Hope you are ready for part two where I'll dive into greater detail with some actual examples for you to follow along. Anyways until next time.

    Contact us


      Related posts:

      laravel livewireLaravel Livewire 7 design principles for web design7 Design Principles For Web Design dynamic doughnut graph using laravel vue componentDynamic Doughnut Graph Using Laravel Vue Component ux consistency in web developmentUX Consistency In Web Development
      Share
      0
      Collin Yarrington
      Collin Yarrington
      Collin is a software developer for Lava Lamp Lab. For him there is no obstacle too big. Learning to improve and overcome those obstacles is what drives him forward.

      Leave a Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Lava Lamp Lab


      Like technology, a lava lamp constantly changes form, producing new conditions with every passing moment



      lava lamp lab facebook   lava lamp lab twitter   lava lamp lab linkedin   lava lamp lab instgram

      Services


      Application & software development

      Outsourced software development

      Project based resourcing

      Digital marketing & consulting

      Graphic design & consulting

      UI / UX design & consulting

      Contact Us


      +27(0) 83 419 4851

      +27(0) 21 036 1165


      switchon@lavalamp.biz


      Unit 4 Monaco Square,
      14 Church Street,
      Durbanville,
      Cape Town, 7550

      NBConsult Group


      nbconsult
      nbconnect msp
      nbclearning
      river broadband
      designer needed
      © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
      Contact us now

        Application & software development

          Outsourced software development

            Project based resourcing

              Digital marketing & consulting

                Graphic design & consulting

                  UI/UX design & consulting

                    Lease an expert

                      Recruitment services

                        We are using cookies to give you the best experience on our website.

                        You can find out more about which cookies we are using or switch them off in settings.

                        Lava Lamp Lab
                        Powered by  GDPR Cookie Compliance
                        Privacy Overview

                        This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

                        Strictly Necessary Cookies

                        Strictly Necessary Cookie should be enabled at all times so that we can save your preferences for cookie settings.

                        If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

                        3rd Party Cookies

                        This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.

                        Keeping this cookie enabled helps us to improve our website.

                        Please enable Strictly Necessary Cookies first so that we can save your preferences!

                        Cookie Policy

                        More information about our Cookie Policy