Plugin not working (nextjs app)

[thesergiomiguel]

Installed the plugin on a nextjs app. It builds and runs without any complaints, but I don't think the styles are being applied correctly. As you can see from the screenshot, while the classes applied to select work, the default select {} rules exposed by this plugin do not (e.g.: all the background-* properties), so the caret is just hanging there completely to the right.

Any ideas?

tailwind.config.js

module.exports = {
  purge: ['./pages/**/*.tsx', './components/**/*.tsx'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [require('@tailwindcss/forms')],
}

dependencies in package.json

  "dependencies": {
    "@tailwindcss/forms": "^0.2.1",
    "autoprefixer": "^10.1.0",
    "next": "10.0.3",
    "postcss": "^8.2.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tailwindcss": "^2.0.2"
  },

custom <Select />

function Select(props: React.SelectHTMLAttributes<HTMLSelectElement>) {
  return <select {...props} className="w-full p-2 border border-black border-solid border-opacity-10" />
}

[adamwathan]

Hey! Can you create a simple project that reproduces the issue? We got a lot of issues that require me to manually recreate someone's project from scratch and I unfortunately just don't have time for that so things end up going unfixed. If you can provide something I can clone and start troubleshooting with right away it's much easier for me to find time to diagnose and fix the issue.

[thesergiomiguel]

I started creating a reproducible repo, and of course everything worked that time. So when diffing the two projects I figured that the problem was with this:

@tailwind base
@tailwind components;
@tailwind utilities;

Namely, the missing semi after base. So my bad. Thanks a lot for taking the time to reply.