2023-05-07, tailwind 8 techniques… and zeroth principle

07 May 2023
en

Tailwind Cheet Sheet #

Group hover #

return (
    <div className="text-green-400 text-6xl bg-slate-900 min-h-screen flex flex-col justify-center items-center">
        <button className="bg-white text-slate-900 group p-10 hover:opacity-50 duration-300 flex items-center gap-4">
            <h1>BUTTON</h1>
        <span className "h-10 w-10 bg-amber-800 group-hover:rotate-45 duration-300"></span>
        </button>
    </div>
)

Use .group on a parent and .group-hover:text-green-400 as an example on a child

Pseude elements #

Use .after:text-green-400 as an example to aim for :after pseude elements, works with .before for :before

Note: tailwind shows how nasty classes can be if abusing it to much! css vars + vanilla CSS to the resque!

Breakpoints (mobile first) #

Mobile first and add breakpoints after… Common stuff, right? .sm:text-green-400 and use whatever else breakpoitns by default .md:, .lg: etc etc, maybe some custom if added in tailwind.config.js

Custom inputs #

Here is where is get cringy… .text-[#111eee] to use color: #111eee… Or .p-[105.67px].

Definatelly not a great stuff to have in a code base but supported by tailwind. Magic numbers and variables which are not reused

Dynamic inputs #

… in a video example of dynamically adding classes, depending on a variable.

Animations #

.animate-ping, .animate-spin look for https://tailwindcss.com/docs/animation

In video when hovered on .group the children with .group-hover:animate-spin animated with desired behavor.

Grid vs Flex #

.grid.grid-cols-1.sm:grid-cols-2 to set way amount of columns from 1 to 2 columns in your grid layout.

not much say about flex, but it keeps the idea of switchigh the .flex.flex-row.sm:flex-col

Hidden #

.hidden.sm:inline to hide first and show for small.

Note: .sr-only is what I like from tailwind here the most

Extends styles #

tailwind.config.js:theme.extends add everything there to use custom vars in your utilitiy classes! Must use for sure

Spaces #

From .py-12 to .flex.flex-col.gap-12 to .space-y-12

Transitions #

For a button. Default state => hover => active => focus to utilise fun colors when clicking a button and… .transition-* for example .transition-color.duration-200

Setup fonts #

with nextjs, import {} from "next/fonts/google"

…OR tailwind.config.js:theme.extend:fontFamily:lobster = "var(--font-lobster)"

VSCode plugins… #

"Libraries" #

Not quite libraries, you "copy paste" the code

Disclaimer #

Tailwind is geat for rapit development and sharing ideas, but I strongly suggest in production to:

Name the things as a compnent => style after
Utilise css vars as much as you can
Use vanilla CSS first, and make as first class in your
Utilise utility classes when needed

Tailwind devs don't love additional css files, it's your choice! But you eventually will have it… admit it and move on

Don't follow the rule "Avoid apply class" because of hardship of naming things. Its right to name! God tells us to name things, and you disobey the one job you are born for. Name the things! Name it with good names to make world better!

Lern CSS first, tailwind last please! Thank yourself later…

References #

Out of topic, Zeroth principle if you will hear it somewhere, this guy is pushing

…briefly its that we can automate ourselves to roll with progress no matter what, by following zeroth principle.

The problem is, we can become a bio battary wihtout zero decision at all. But I listened him more than this video, and we can save our energy for making desitions where we want and automate the rest. I like this

People spy for core motivation… the R.I.C.E (Reward, Ideology, Coercion, Ego)

When you recruit somebody, when you create a spy for arreas which are most relevant to that person. You see that person mostly…

reward driven (running towards)
ideaology driven (running towards)
ego driven (runing towards)
driven by gun pointing to the face… (driven by fear, thus is the running from)

Source: facebook shorts

Note: not quite, people run from hell towards paradise. Thinking is similar, but the idea to look for core motivators is a necessity. From what people runs? Where person aims? by action, it can be infered from actions.

If a person is MOSTLY driven by Coercsion-Fear, that means that something is wrong happening with her and person needs help… "stop it, get some help"

Previous: Using Tailwind despite criticism
Next: 2023-05-20, What's new in web UI