Tips and Tricks to make Tailwind Development Easier

Tailwind CSS is a utility-first CSS framework that's great for responsive design and working in large teams. While it mainly focuses on its many built-in single-use properties, it is also highly customizable to whatever you need it to do. Here are some tricks to make your Tailwind experience better.

Adding the Tailwind CSS IntelliSense VSCode Extension 

It can be difficult to remember, look up, and type out the hundreds of Tailwind's built-in classes. This [Extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) offers autocomplete and syntax highlighting to save you some of the trouble. 

Using arbitrary values 

While Tailwind has many built-in classes, sometimes you need something very specific for a single component. In that case, you can use square-bracket notation to make a one-time arbitrary variable. The code below adds a background color that isn't in the default color palette, but you can use arbitrary values for anything, like height, CSS grid layouts, mask-type, etc. 

<div className="bg-[#09000A]">  
	Content
</div>

Adding custom breakpoints

If the built-in responsive screen breakpoints aren't right for what you're doing, you can override them or add more in your `tailwind.config.js` file like so: 

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      screens: {
        'lg': '900px',
        'xs': '350px', 
      },
    },
  },
}

This overrides the 'lg' breakpoint from 1440px to 900px and adds a breakpoint called 'xs' at 350px. 

However, if you need a specific breakpoint that you only use in one component, you can use square brackets like before: 

<div class="... bg-red-500 @[600px]:bg-green-500">
	Content
</div>

This changes the background color from red to green when the screen is larger than 600 pixels. 

Creating radial gradients

While Tailwind has many built-in features, it does not directly support radial gradients. You'll need to edit your `tailwind.config.js` to manually create them like so: 

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      backgroundImage: {
        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-radial-stretched': 'radial-gradient(80% 80% at 80% 20%, var(--tw-gradient-stops))',
      }
    }
  }
}

This adds a tailwind variable called `bg-gradient-radial` that can use Tailwind's gradient color variables. You can also add other gradient keywords and percentages, such as the length and size percentages in `gradient-radial-stretched`. After adding the custom classes to your config, you can use them in your code like the built-in Tailwind classes. 

<div class="bg-gradient-radial from-red-500 via-green-500 to-blue-500">Content</div>

Using plugins 

You can extend Tailwind's base functionality with plugins, which can add more styles and functionality to your project. For example, the Typography plugin can add styling defaults to HTML that you can't directly style, like content pulled from a CMS. Another useful plugin is tailwindcss-animated, which adds built-in animations that can enhance your project. 

Tailwind can make front-end development significantly easier and more productive, and taking advantage of its customization features and add-ons can enhance your experience. These are some of the many tricks available in Tailwind, and exploring the documentation and experimenting more will help you make well-designed and functional web applications. If you have any questions about developing websites and applications, you can contact us at Arkane Digital.