switchon@lavalamp.biz
australia flag +61(0) 42 420 8911
south africa flag +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
    • 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
    • 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
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
switchon@lavalamp.biz
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
    • 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
    • NBConsult Group
    • Partners
    • Lightbox Digital
  • Blog
  • Join us
  • Contact
exposure to new and unfamilar things
Exposure To New And Unfamiliar Things
July 8, 2022
software testing
Software Testing And The Importance Thereof
July 18, 2022

A Deeper Dive Into TailwindCSS

tailwind css

Introduction


Previously I compared TailwindCSS to Bootstrap and included some examples of how the different frameworks apply styles. But that was more of an introduction to what TailwindCSS can rival, however in this blog post I want to go over some key components of TailwindCSS as well as customizing your applications theme.

I just want to highlight that TailwindCSS is a class heavy framework that means whilst developing your code can become hard to read. This is why we were given the ability to stack classes and style attributes to make up a single class that applies all styles/classes under one class name.

Keep in mind I have added TailwindCSS to a Laravel app that I generated. So my file layout might look slightly different than what you may be seeing. But the concept should be the same.



Class Stacking


This is actually really simple, all you would need to do is add a new class in the base import inside your applications css/scss file that you set it up on. Like I’ve done below.

By adding the class within the base import you have initialized the class within your application and allowing it to make use of the Preflight capabilities that the base import provides. Meaning you can now apply existing classes into one new class by using the @apply directive that TailwindCSS provides, Like this.

or you could just add the style attributes that you need to the class directly or you could make an external class and have then class inherit its attributes, Like this.

So just by going through this you should be seeing all the benefits from a development stand point. TailwindCSS makes it easy for you to overwrite existing classes or even create classes with a combination of style attributes.



Customise Theme


There is far more customization that can be done. For example you can customise and setup your applications colour theme with ease, inside your tailwind.config.js file you can add custom colours whilst making use of TailwindCSS's way of applying those colours to elements. Here is a basic setup.

Everything within the "colors" object is where you set your colors. Looking at this you must be thinking why would I list them in this file? Well to explain why its good practice I would have to show you.

Lets look at a class that is already built into TailwindCSS.

This is the output that you should get if the classes are applied correctly.

It's super simple but I'm showing you how the colours that are being used.  So now when you add your custom colour theme use it like this.

Notice the colours that are being output below.



Conclusion


Thanks for giving my post a read. I Hope this helped you understand TailwindCSS  a bit better. If there is any questions about what I have explained so far please feel free to comment on this post I'll respond as soon as possible. This will be all for now until next time, keep developing!

Contact us


    Related posts:

    sending files with auxiliary dataSimple Way To Send A File With Auxiliary Data Via Axios In VueJS 7 design principles for web design7 Design Principles For Web Design laravel livewireLaravel Livewire tailwind cssTailwindCSS For Faster Front-end 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 secondary logo white

    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
    • Recruitment services
    • Lease an expert

    Contact Us

    south africa+27(0) 83 419 4851

    south africa+27(0) 21 036 1165

    australia+61(0) 42 420 8911


    switchon@lavalamp.biz


    Lava Lamp Lab,
    Unit 1 Monaco Square, 14 Church Street, Durbanville, Cape Town, 7550

    NBConsult Group

    nbconsult
    designer needed
    © 2023 Lava Lamp Lab (Pty) Ltd | All Rights Reserved | Privacy Policy
        Business Automation

        Business-specific workflows assist our clients with Disaster recovery, time tracking and invoice generation, to mention a few. If you choose to outsource your enterprise app development, we work with you to understand your business and assist to deliver automation for great business efficiency.

        eCommerce Solutions

        We are industry experts in Fintech and eCommerce, Lava Lamp Lab will help you with custom software development to provide you with the quality software services for creating online shops, Fintech mobile apps and web presence for your business of any size, allowing you to engage, sell, support and collect payments.

        Startup & Innovation

        Lava Lamp Lab believes in helping you grow your idea into a business. Our team has provided outsourced services to multiple tech start-ups and investors over the last decade, delivering innovative solutions. We have been trusted over other software development companies to build their entire technology stack.

        Data Mining

        Key to any business is the processing of websites and social network APIs, aligning the information gathered to information collected from internal enterprise systems. This big data can be rendered on reporting dashboards to create Business Intelligence. You can entrust Lava Lamp Lab to reliably deliver on this.

        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 .

                          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