Tailwind CSS Tips and Tricks

There are ten great tips with you that I really do think we can use as frontend developers to be more productive while building an application with Tailwind CSS.

Sun May 30 2021

Tailwind CSS Tips and Tricks

Tailwind is an amazing CSS framework, and I expect to keep using it in the foreseeable future. By using these tips, I've found that my codebases are easy to read and seamless to maintain. I hope these were useful to you. If there is any tip or resource you think is relevant for this post, please leave it in the comments down below.

Installation

Follow official instructions to get tailwind into your project set up. When you are done make sure you have tailwind.config.js file is in place and you are able to change the values and see the changes realtime.

Tips and Tricks

1. Center the container

Set some settings for your container in your configuration file and it will automatically be applied to all .container classes.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true
    }
  }
}

2. Get Editor Extensions

Since Tailwind CSS is so predictable, it opens a world of possibilities for extensions that improve development productivity and lower the learning curve.

Following are some you can use in VS Code

Atom

3. Use plugins

It is no surprise that Tailwind CSS is extensible. Plugins help developers register new styles for Tailwind CSS through JavaScript. They are useful for teams looking to share their styles through the organization or developer who wish to generate class names for complex use cases like animations.

4. Custom maxHeight

You can specify extend maximum height using the following values in your config file.

theme: {
  ...
  maxHeight: {
    '0': '0',
    '1/4': '25%',
    '1/2': '50%',
    '3/4': '75%',
    full: '100%'
  }
  ...

This will enable you to specify classes like max-w-1/4, max-w-1/2, max-w-3/4 etc...

Or if you want to custom values you can try something like

extend: {
  height: {
    'screen/2': 'calc(100vh / 2)',
    'screen/3': 'calc(100vh / 3)',
    'screen/4': 'calc(100vh / 4)',
    'screen/5': 'calc(100vh / 5)'
  },
}

This will enable you to specify classes like h-screen/2, h-screen/3 etc

Some good reads

Leave a comment

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from our records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.

Comment via email
Nikhil M
Nikhil M

Entrepreneur / Privacy Freak / Humanist / Blockchain / Ethereum / Elixir / Digital Security / Online Privacy

Tags Recent Blogs