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

Zoals je kan zien, gebruiken de inputs de standaardkleur van de browser. Dit kan worden overschreven met de css property accent-color. Voeg gewoon de class accent-dash-green-dash-600 toe.

We kunnen zelfs nog een stap verder gaan en onze eigen gedefinieerde brand kleuren uit de tailwind-configuratie gebruiken. Gebruik hiervoor de class accent-dash-primary of accent-dash-brand. Zo kunt u uw invoerelementen eenvoudig een merkspecifieke touch geven.

Gebruik van de accent color property

Inleiding tot Data Attribute Variants in Tailwind CSS v3.2 Data Attribute Variants zijn een nieuwe functie in de nieuwste versie van Tailwind CSS waarmee u aangepaste stijlen kunt toevoegen aan uw webprojecten met behulp van data attributen. Dit betekent dat u eenvoudig op attributen gebaseerde stijlen kunt maken die zowel responsief als aanpasbaar zijn. Met Data Attribute Variants kun je verschillende stijlen toepassen op hetzelfde element op basis van de waarde van zijn data attribuut. Dit maakt het eenvoudig om aangepaste ontwerpen te maken voor specifieke gebruikssituaties, zoals het onderscheiden van verschillende statussen van een component.

Om aan de slag te gaan met Data Attribute Variants in Tailwind CSS, moet je updaten naar versie 3.2 of hoger. Zodra je dat hebt gedaan, kun je de data attribuut variant gebruiken voor de styling van hier een voorbeeld voor een succeswaarschuwing:


Dit kan handig zijn wanneer je bibliotheken van derden gebruikt of situaties waarin je geen framework JS props kunt doorgeven. Je code kan vereenvoudigd worden omdat er geen conditionals geschreven hoeven te worden voor de stijlen.

Hoe richt je je op child elementen met de `.group` class. Voeg de groepsklasse toe aan het element waar het data-attribuut is ingesteld en geef het voorvoegsel van je datavariantklasse `group-`:


Op basis van de waarde van het attribuut krijgen de componenten de juiste stijl.

Meer info hier: 

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

Hoe gebruik je data attributen in Tailwind CSS?

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: 

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).

Blog

Using the accent color property

Gebruik van de accent color property

Hoe gebruik je data attributen in Tailwind CSS?

How to use data attribute variants in Tailwind CSS

How to use SVGs as React Components in Next.js

Top 10 VSCode extensions

Mijn eerste sanity post

My first sanity post