search

tailwindlabs / tailwindcss-forms

A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
https://tailwindcss-forms.vercel.app
MIT License
4.15k stars 219 forks source link

'require' not define, cannot import plugin to tailwind config #151

Closed vim-diesel closed 10 months ago

vim-diesel commented 10 months ago

What version of @tailwindcss/forms are you using?

10.2.3

What version of Node.js are you using?

v20.9.0

What browser are you using?

Edge

What operating system are you using?

Windows

Reproduction repository

https://github.com/vim-diesel/vite-eslint

Describe your issue

Attempting to import the plugin to tailwind.config.js throws an error:

image

vim-diesel commented 10 months ago

I may have found a fix, although I'm not sure if it is a fix or a bandaid:

To specify environments in a configuration file, use the env key and specify which environments you want to enable by setting each to true. For example, the following enables the browser, es6 and Node.js environments:

In your .eslintrc.js file ;

env: {
   browser: true,
   node: true,    <<<<--- Add this
   es6: true
 },
thecrypticace commented 10 months ago

Hey, this is a project configuration thing — especially given that these errors are coming from ESLint.

However, if you're in a Vite project I'd suggest using import instead of require anyway as this is the proper way to do this when using ES Modules:

import formsPlugin from '@tailwindcss/forms'

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [formsPlugin],
}
shivangi-2001 commented 6 months ago

Remove this plugin install in vscode image