As you can see the input elements use the default color from the browser. This can be overwritten with the accent-color css property. Just add the class accent-dash-green-dash-600.

We can even take it a step further and use our own defined brand colors from the tailwind config. Using the class accent-dash-primary or accent-dash-brand. So it is easy to give your input elements a brand touch.

Using the accent color property

Introduction to Data Attribute Variants in Tailwind CSS v3.2 Data Attribute Variants are a new feature in the latest version of Tailwind CSS that allow you to add custom styles to your web projects using data attributes. This means that you can easily create attribute-based styling that is both responsive and customizable. With Data Attribute Variants, you can apply different styles to the same element based on the value of its data attribute. This makes it easy to create custom designs for specific use cases, such as differentiating between different states of a component.

To get started with Data Attribute Variants in Tailwind CSS, you need to update to version 3.2 or later. Once you have done that, you can use the data attribute variant for styling here an example for a success alert:


This can be useful for when using 3rd-party libraries or situations where you can't pass framework JS props. Your code can be simplified as there is no need to write conditionals for the styles.

How to target child elements using the `.group` class. Add the group class on the element where the data attribute is set, and then prefix your data variant class with `group-`:


Based on the value of the data attribute, the components get the right style.

More info here: 

https://tailwindcss.com/blog/tailwindcss-v3-2#data-attribute-variants

How to use data attribute variants in Tailwind CSS

SVGR turns SVGs into React components that you can easily import in your app. This way you have cleaner files and still have the ability to apply easy CSS on it!

Get started:

How to use SVGs as React Components in Next.js

Automatically finds, parses and provides code actions and code completion for all available imports. Works with 

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

 class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

 within each repository. It helps you to 

 at a glance via Git blame annotations and CodeLens, 

 via rich visualizations and powerful comparison commands, and so much more.

This extension styles css/web colors found in your document.

Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

Tailwind CSS IntelliSense enhances the Tailwind development experience by providing Visual Studio Code users with advanced features such as autocomplete, syntax highlighting, and linting.

This extension contains code snippets for JavaScript in ES6 syntax for VSCode editor (supports both JavaScript and TypeScript).

I still struggle with paths so this is a helpful plugin!

Blog

Using the accent color property

How to use data attribute variants in Tailwind CSS

How to use SVGs as React Components in Next.js

Top 10 VSCode extensions

My first sanity post