Styling Tips

Some more styling tips.

How to design

Let's make a simple card to add a user. We can generate the UI quite easily and quickly with our classes and Tailwind:

<div className='cardDefault space-y-4'>
    <div className="text3">Add User</div>
    <div className="textMuted">Add a new user to your team</div>
    <div className="mt-2">
        <span className="textLabel">Name</span>
        <input className="inputMain w-full" type="text" placeholder="Name"/>
    </div>
    <div>
        <span className="textLabel">Email</span>
        <input className="inputMain w-full" type="text" placeholder="Email"/>
    </div>
    <div className="flex justify-between mt-4">
        <button className="btnSecondary">Cancel</button>
        <button className="btnPrimary">Add</button>
    </div>
</div>

As you can see with this approach, code is easier to follow without the clutter of large Tailwind classes. Furthermore, reusing CSS classes without re-typing saves so much time, with no risk of missing something. Likewise, making a change to your class in your CSS file in just 1 location will update styles throughout your whole app.

Animations

Our classes use animations, however they can be turned off by removing the transition and duration tailwind classes from the classnames.

When rendering animations based on states, some folks may not know it is fairly easy to do with React and Tailwind.

For example, to show a tooltip based on a react useState showTooltip:

`${showTooltip ? 'translate-y-0 opacity-100 visible' : 'translate-y-2 opacity-0 invisible'}`

You can see that each of translate, opacity and visibility have a state during the true and false conditions. This can be accompanied with animation utilities, for example duration-200 and transition-all to complete the animation:

className = {`${showTooltip ? 'translate-y-0 opacity-100 visible' : 'translate-y-2 opacity-0 invisible'} duration-200 transition-all`}

All our premade components which have animations have these classes already, and so do our sample design systems (usually present inside the container textbox) so feel free to use them!