Custom Form Styles Not Being Applied

[MonteKrysto]

I am using Next.js v9.1.2. I have Tailwind and the plugin installed and added to my tailwind.config.ts file however the styles are not being picked up.

package.json:

  "devDependencies": {
    "@tailwindcss/custom-forms": "^0.2.1",
    "autoprefixer": "^9.7.1",
    "postcss-easy-import": "^3.0.0",
    "postcss-preset-env": "^6.7.0",
    "tailwindcss": "^1.1.3",
    "tslint": "^5.20.1",
    "tslint-config-prettier": "^1.18.0",
    "tslint-react": "^4.1.0"
  },

tailwind.config.ts:

export default module.exports = {
  theme: {
    extend: {}
  },
  variants: {},
  plugins: [
    require('@tailwindcss/custom-forms')
  ]
}

Component:

return (
    <div>
      <label className="block">
        <span className="text-gray-700">{props.label}</span>
        <select
          className="form-select block w-full mt-1" 
          onChange={props.onChange}
          onBlur={props.onBlur}
        >
          {props.options.map((option, idx) => {
            return (
              <option key={idx} value={option.value} label={option.label}>
                {option.label}
              </option>
            );
          })}
        </select>
      </label>
    </div>
  );

In broswer:

css:

This is in Chrome Version 78.0.3904.70 (Official Build) (64-bit) on Mac 10.14.2

[hacknug]

Are you passing tailwind.config.ts to Tailwind? It will look for tailwind.config.js by default.

[MonteKrysto]

Thank you @hacknug, that was the issue.