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

• Center the container
• Get Editor Extensions
• Use plugins
• Custom maxHeight

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

• Tailwind CSS IntelliSense
• Refactor CSS

Atom

• niksmac/atom-tailwindcss-2

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.

• Tailwind Forms
• Tailwind Typography

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

• https://blog.logrocket.com
• Videos