I made a Prettier plugin that sorts your Tailwind classes... randomly!

lazy-sock — Thu, 15 Aug 2024 14:51:42 +0000

Prettier is a code formatter that many developers rely on to keep their code clean and consistent. But what if you wanted to inject a bit of randomness into your workflow? Enter prettier-plugin-tailwindcss-anarchy—a playful twist on the official Tailwind CSS Prettier plugin. Instead of organizing your Tailwind classes in a structured, recommended order, this plugin shuffles them randomly every time you format your file. It's perfect for developers who enjoy a bit of unpredictability or just want to shake things up! Maybe you could install this on a teammate's machine...

If you're new to Prettier or need a quick refresher, check out this guide by Web Dev Simplified. It walks you through the installation and setup process.

To learn more, check out the website: https://prettier-plugin-tailwindcss-anarchy.netlify.app/

Installation

Install prettier and prettier-plugin-tailwindcss-anarchy:

npm install -D prettier prettier-plugin-tailwindcss-anarchy

Create a file named .prettierrc and add the following code:

{
    "plugins": ["prettier-plugin-tailwindcss-anarchy"]
}

Thats it! Still have problems? Check out the official prettier-plugin-tailwindcss documentation.

Make a typewriter effect with TailwindCSS in 5 minutes

lazy-sock — Thu, 13 Jul 2023 20:33:02 +0000

Typewriter animations are often done with Javascript. But, we can easily achieve one with TailwindCSS.

Simple Typewriter

Tailwind Play: https://play.tailwindcss.com/17LendGXa0

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:bg-white
before:animate-typewriter
">Hello World</h1>

This code snippet generates the typewriter. Don’t forget to add the typewriter animation below!

To make it work properly, make the background color of the ‘before’ pseudo element the color of the background behind it.

Since the text should first be invisible, the h1 is being covered by the ‘before’ pseudo element. With the animation the text is revealed step-by-step. You have to use a Monospace font so nothing gets messed up when the text is revealed.

TailwindCSS Config (`tailwind.config.js`)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: "typewriter 2s steps(11) forwards"
      },
      keyframes: {
        typewriter: {
          to: {
            left: "100%"
          }
        }
      }
    },
  },
  plugins: [],
}

In the tailwind.config.js file we add the typewriter animation. Feel free to modify the duration; I have chosen it as 2 seconds.

You only need to change the 'steps(n)' value, where 'n' represents the number of letters (including whitespace!).

Therefore “Hello World” is 11 letters, so I wrote steps(11).

Adding a caret

(yes, the blinking vertical line is called caret)

Tailwind Play: https://play.tailwindcss.com/FSWpXQA9Dg

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:animate-typewriter
before:bg-white
after:absolute after:inset-0 after:w-[0.125em] after:animate-caret
after:bg-black">Hello World</h1>

The caret is the ‘after’ pseudo element. While the text is being written, it does not blink, like a real caret.

TailwindCSS Config (`tailwind.config.js`)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: 'typewriter 2s steps(11) forwards',
        caret: 'typewriter 2s steps(11) forwards, blink 1s steps(11) infinite 2s',
      },
      keyframes: {
        typewriter: {
          to: {
            left: '100%',
          },
        },
        blink: {
          '0%': {
            opacity: '0',
          },
          '0.1%': {
            opacity: '1',
          },
          '50%': {
            opacity: '1',
          },
          '50.1%': {
            opacity: '0',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },
  plugins: [],
}

In the tailwind.config.js file we add the blink keyframes and the caret animation.

The caret animation first animates the caret like the typewriter, so that it is in front of the text. After the typewriter animation has finished, the blink animation begins. That’s because it has a delay of 2 seconds, which is also the duration of the typewriter animation.

Hope you found it helpful!

DEV Community: lazy-sock

I made a Prettier plugin that sorts your Tailwind classes... randomly!

Installation

Make a typewriter effect with TailwindCSS in 5 minutes

Simple Typewriter

CSS

TailwindCSS Config (tailwind.config.js)

Adding a caret

CSS

TailwindCSS Config (tailwind.config.js)

TailwindCSS Config (`tailwind.config.js`)

TailwindCSS Config (`tailwind.config.js`)