'@tailwindcss/forms plugin not working with React

I am trying to use the tailwindcss plugin forms, so I've installed it via npm using npm install @tailwindcss/forms and added the dependency in the forms section of my tailwindconfig @tailwindcss/forms with plugins: [ require("@tailwindcss/forms") ]. According to https://github.com/tailwindlabs/tailwindcss-forms it must now be active, and it does seem to be installed - at least I don't get an error after starting the server. Hoewever, when styling some checkboxes e.g. with <input type="checkbox" class="rounded text-pink-500" /> the styles are not applied.

reactjsformsnpmtailwind-css


Solution 1:[1]

In tailwind.config.js modify plugin to use class strategy.

// tailwind.config.js
plugins: [
 require("@tailwindcss/forms")({
   strategy: 'class',
 }),
],

and add form-checkbox class to input element.

<input type="checkbox" class="form-checkbox rounded text-pink-500" />

This method worked for me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Amjed Ali

Related Questions