DEV Community: Myna UI

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.