DEV Community: Praveen Juge

Global TailwindCSS Classes I add on every new project

Praveen Juge — Mon, 18 Sep 2023 13:39:55 +0000

Here is a list of classes I add when I'm starting a new project:

<html class="min-h-screen bg-white font-sans text-sm text-gray-950 antialiased">
  ...
</html>

Here's a breakdown:

min-h-screen: This class ensures that the content of your web page takes up at least the full height of the user's screen. It's especially useful for ensuring that your website looks well-proportioned on various devices, preventing any unwanted gaps or scrolling issues.
bg-white: Setting the background color to white as a default helps maintain a clean and neutral canvas to start with. Of course, you can always modify this background color to match your project's branding or design theme later on.
font-sans: This class applies a sans-serif font family to your text, offering a clean and modern typography style. Like the background color, you can easily customize the font family according to your project's requirements.
text-sm: Tailwind CSS provides a range of text sizing classes, and text-sm sets the base font size to small. This ensures that your text is legible without being too large and gives you room to adjust text sizes as needed for different sections of your project.
text-gray-950: The text-gray-950 class assigns a specific shade of gray (#030712) to the text color. Using a consistent text color helps maintain readability and visual harmony throughout your project. You can always replace this color with your preferred palette.
antialiased: Antialiasing is a technique that smooths the jagged edges of text and images, resulting in a cleaner and more polished appearance. Adding this class ensures that your text and visuals are displayed with improved clarity.

Happy Coding!

Try using Figma solely with keyboard shortcuts for 20 minutes daily.

Praveen Juge — Fri, 15 Sep 2023 18:19:29 +0000

The one thing that helped me move faster while designing is to use keyboard shortcuts in Figma wherever possible.

While designing everything is not possible (yet) with only keyboard, we can save loads of time using the available keyboard shortcuts.

I learned most of the shortcuts by forcing myself to use only keyboard to design for 20 mins everyday. I try to find how to do something just using the keyboard before resigning to the mouse.

At first it was hard to find the shortcut and it was hurting my workflow. But after some days the shortcuts I have learned have been very useful for improving the speed at which I design.

So what are you waiting for? Press ⌃⇧? in your Figma to get started with keyboard shortcuts.

Move your tailwind's postcss.config.js to package.json to reduce config files

Praveen Juge — Thu, 14 Sep 2023 07:09:03 +0000

When using only TailwindCSS with postcss in your app, you will see something like this in your postcss.config.js file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

If there is no other plugins needed, you can move this config to your package.json file like this:

{
  "name": "test",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "build": "next build",
    "dev": "next dev",
    "lint": "next lint",
    "start": "next start"
  },
  "dependencies": {
    "autoprefixer": "10.4.15",
    "next": "13.4.19",
    "postcss": "8.4.29",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3"
  },
  "postcss": {
    "plugins": {
      "tailwindcss": {},
      "autoprefixer": {}
    }
  }
}

This is mainly aimed to make the root folder of your project cleaner with less unneeded config files.

Recreating Bootstrap Grid with Tailwind CSS Grids

Praveen Juge — Tue, 27 Oct 2020 10:55:21 +0000

Bootstrap grid is powered by flexbox, it has a twelve column system, five default responsive tiers, and a mobile-first system.

Tailwind CSS grids are powered by CSS Grids, which technically can have however many columns, five responsive tiers, lots of gutter gap utilities and are easily customizable.

Let’s take the following bootstrap grid:



<div class="container">
  <div class="row">
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
    <div class="col-sm">One of three columns</div>
  </div>
</div>

This will get us three columns like this,

We can recreate the same on tailwind by using this,



<div class="grid grid-cols-3">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

We are using the CSS grid there and splitting it into three columns by using Grid Template Columns tailwind utility.

CSS Grids doesn’t have any gutter space built in like bootstrap grid, but we can add that by using the gap utility like this,



<div class="grid grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

Since these grid utilities are mobile-first by default, we have to add other cols utilities to make sure it looks good on mobile.



<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

Here, on the lowest device-width, everything would be on one column and after it hits the lg breakpoint it would be three columns.

We have utility classes for up to 12 columns so we can have a 12 column layout like bootstrap.

The same responsive classes could be used for gap utilities also. The gutter gap below would increase after it hits the lg breakpoint. Like this,



<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-8">
  <div>One of three columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

But, what if you want to change individual column sizes? You can do that with Grid Column utilities.



<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-2">Takes two columns</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

The above code uses grid column utility to make the first column take up two columns. And, this is also mobile first. So, if you want it to take up one column on mobile you can do the following,



<div class="grid grid-cols-1 lg:grid-cols-4">
  <div class="col-span-1 lg:col-span-2">Takes one column on mobile and two on desktop</div>
  <div>One of three columns</div>
  <div>One of three columns</div>
</div>

And that’s the easiest way to create a bootstrap like the grid in the tailwind.

Here is the final tailwind playground:

https://play.tailwindcss.com/eAbd7eiQIY

You can learn more about CSS grids here or learn by playing this interactive tutorial.

Extract UI Components with AlpineJS and TailwindCSS using x-spread and @apply

Praveen Juge — Thu, 06 Aug 2020 14:41:20 +0000

Today we are going to create a dropdown component using AlpineJS and TailwindCSS.

AlpineJS is a simple JavaScript toolkit for creating reactive components. TailwindCSS is an utility based CSS framework. You can use both these frameworks in the HTML markup itself. But for some repeating components, you can extract it as a separate component so that you can reuse it.

Note: The following example doesn't follow accessibility principles to keep it simple. Make sure you follow accessibility principles for production websites.

Check out this gist for full source code.

HTML

Open a new html file in your website and add the following snippet.

<div class="dropdown">
  <button class="dropdown-trigger" id="open-color-menu">
    Open Dropdown
  </button>
  <div class="dropdown-list" id="color-menu">
    <a href="#" class="dropdown-item">Red</a>
    <a href="#" class="dropdown-item">Blue</a>
    <a href="#" class="dropdown-item">Green</a>
  </div>
</div>

CSS

Let's start with all the CSS that we need, I assume you have already set up a Tailwind integrated website. So in your CSS file, you can add this.

We use a special @apply function here that is available from TailwindCSS. It's used to inline any Tailwind utility classes into our own custom CSS.

[x-cloak] {
  @apply hidden;
}

.dropdown-trigger {
  @apply inline-block py-2 px-4 rounded-md bg-purple-700 text-white;
}

.dropdown-list {
  @apply absolute z-10 shadow-md w-56 flex flex-col border border-solid border-gray-200 bg-white p-2 rounded;
}

.dropdown-item {
  @apply relative flex px-2 py-1 items-center text-gray-800;
}

JS

Next, we can use Alpine to give our dropdown that sweet interactivity. Make sure you already have AlpineJS defined and then change your dropdown markup to this.

<div x-data="dropdown()">
  <button class="dropdown-trigger" id="open-color-menu" x-spread="trigger">
    Open Dropdown
  </button>
  <div class="dropdown-list" id="color-menu" x-spread="dropdown" x-cloak>
    <a href="#" class="dropdown-item">Red</a>
    <a href="#" class="dropdown-item">Blue</a>
    <a href="#" class="dropdown-item">Green</a>
  </div>
</div>

Here, x-data is the encapsulating function, the x-spread attributes will allow us to bind the object of Alpine directives to an this element so that we can reuse it everywhere.

And x-cloak hides the dropdown list before Alpine is defined. So we won't see the dropdown list and then hide on page load.

And then add this to a script file in your website:

window.dropdown = function () {
  return {
    open: false,
    trigger: {
      ["@keydown.escape"]() {
        this.open = false;
      },
      ["@click"]() {
        this.open = true;
      },
    },
    dropdown: {
      ["@keydown.escape"]() {
        this.open = false;
      },
      ["x-show.transition"]() {
        return this.open;
      },
      ["@click.away"]() {
        this.open = false;
      },
    },
  };
};

When you click on the dropdown trigger,

The @click directive makes the open variable true.
When the open variable is true, the dropdown will show because of the x-show.transition directive, where transition will add a little animation while opening up.

When you click outside or press escape button,

The @click.away and @keydown.escape directives will make the open variable false.
It will make the same x-show.transition hide the dropdown element.

And that's it, you can use this markup everywhere in your website and it will work for you. If you need to change CSS or JS in this component, you have to do it just once.

Check out this gist for the full source code.

Rise of Tailwind - A Utility-First CSS Framework

Praveen Juge — Fri, 24 Jul 2020 04:21:23 +0000

Tailwind is a utility-first CSS framework, the keyword being ‘utility’. It is basically a set of classes that you can use in your HTML.

For instance, to recreate the following button, we can use:

<button class="bg-purple-700 text-white py-1 px-4">Button</button>

Here the classes are prebuilt by tailwind to give the following CSS:

.bg-purple-700 {
  background-color: #6b46c1;
}
.text-white {
  color: #ffffff;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.px-4 {
  padding-top: 1rem; 
  padding-bottom: 1rem;
}

Therefore, we don't have to write any custom CSS to get this button. This can be heavily extended to build whole web applications without the need for any other styles apart from a tailwind.

Benefits of Tailwind that I love

No need to write any responsive media queries any more

If you want something to display on mobile and not on the desktop, add the class block md:hidden. As this is a mobile-first approach, that element will have display: block on mobile and after the md breakpoint, which is 768px, it will toggle to display: none.

Consistent spacing and typography

As everything in utility classes is predefined, we will have consistent padding and margin throughout our platform. And, typography in tailwind is the best, you don't have the need to change any of the default config yet.

PurgeCSS built-in

It has the ability to remove unused CSS that we didn't use in our app. It does this with the help of purge css built-in within tailwind. This gives loads of size savings on the final CSS build.

Let's build something...

Now let's build a simple alert component to see how tailwind works in detail. Enter the following command in your terminal, make sure you have Node installed.

mkdir tailwind-alert
cd tailwind-alert
npm init # Follow the steps to initialize a npm project
touch index.html postcss.config.js main.css
npm i -save tailwindcss postcss-cli

In your index.html, postcss.config.js and main.css copy the following code:

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
   <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="tailwind.css" />
  </head>
  <body class="m-10">
    <div role="alert">I'm an alert that informs you of stuff.</div>
  </body>
</html>

// postcss.config.js
module.exports = {
  plugins: [require("tailwindcss")],
};

/* main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Finally, add the following script in your package.json:

// package.json
...
  "scripts": {
    "start": "postcss main.css -o tailwind.css --watch"
  },
...

Now do npm start in your terminal and open index.html in your browser, you should see this:

Style with tailwind

Let's style it with a tailwind! For a typical alert component, we need to give a background color and text color first. So in your index.html, change the following:

<div class="bg-purple-200 text-purple-700" role="alert">I'm an alert that informs you of stuff.</div>

Now let's add some padding with rounded corners, for padding we have p-{n} utilities and border radius can be also given with utility classes.

<div class="bg-purple-200 text-purple-700 py-2 px-4 rounded" role="alert">I'm an alert that informs you of stuff.</div>

This looks better! But, for reusability, we can make this a component. In your main.css file add the following code:

/* main.css */
@tailwind base;
@tailwind components;

.alert {
  @apply border-2 border-solid text-base rounded py-2 px-4;
}

.alert-primary {
  @apply bg-purple-200 border-purple-200 text-purple-700;
}

@tailwind utilities;

The @apply is a special tailwind directive that makes it easy to refer to the tailwind utility classes here. Now refresh index.html in your browser and you will see this:

You can now use this alert component everywhere and can change its styles in one place. Since we are using tailwind classes, this will give us better control of spacing, colors and typography compared to our own CSS styles.

Conclusion

As I am using tailwind in my projects, I didn't have the need to use sass or even create multiple stylesheets. Everything I need can be done within the tailwind itself.

Some cons that I see:

The steep learning curve for new developers
Postcss takes a long time to compile for big projects
Initial setup for projects is long

I'm sure the tailwind team will address and solve these issues with the best they can in the future. Check out the official documentation and get started. Happy coding!