form-* dos not apply all styles

Question

form-* dos not apply all styles

zoedsoupe opened this issue 5 years ago · 3 comments

I successfully added @tailwindcss/custom-forms to my Elixir Phoenix project.

However it seems that any form-* style class don't add some styles or add none at all.

Version
tailwind: 2.0.3
custom-forms: 0.2.1
postcss: 8.2.6

tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')
const plugin = require('tailwindcss/plugin')
const Color = require('color')

module.exports = {
  purge: [
    '../lib/**/*.ex',
    '../lib/**/*.leex',
    '../lib/**/*.eex',
    './js/**/*.js'
  ],
  theme: {
    themeVariants: ['dark'],
    colors: {
      transparent: 'transparent',
      white: '#ffffff',
      black: '#000000',
      gray: {
        '50': '#f9fafb',
        '100': '#f4f5f7',
        '200': '#e5e7eb',
        '300': '#d5d6d7',
        '400': '#9e9e9e',
        '500': '#707275',
        '600': '#4c4f52',
        '700': '#24262d',
        '800': '#1a1c23',
        '900': '#121317',
      },
      'cool-gray': {
        '50': '#fbfdfe',
        '100': '#f1f5f9',
        '200': '#e2e8f0',
        '300': '#cfd8e3',
        '400': '#97a6ba',
        '500': '#64748b',
        '600': '#475569',
        '700': '#364152',
        '800': '#27303f',
        '900': '#1a202e',
      },
      red: {
        '50': '#fdf2f2',
        '100': '#fde8e8',
        '200': '#fbd5d5',
        '300': '#f8b4b4',
        '400': '#f98080',
        '500': '#f05252',
        '600': '#e02424',
        '700': '#c81e1e',
        '800': '#9b1c1c',
        '900': '#771d1d',
      },
      orange: {
        '50': '#fff8f1',
        '100': '#feecdc',
        '200': '#fcd9bd',
        '300': '#fdba8c',
        '400': '#ff8a4c',
        '500': '#ff5a1f',
        '600': '#d03801',
        '700': '#b43403',
        '800': '#8a2c0d',
        '900': '#771d1d',
      },
      yellow: {
        '50': '#fdfdea',
        '100': '#fdf6b2',
        '200': '#fce96a',
        '300': '#faca15',
        '400': '#e3a008',
        '500': '#c27803',
        '600': '#9f580a',
        '700': '#8e4b10',
        '800': '#723b13',
        '900': '#633112',
      },
      green: {
        '50': '#f3faf7',
        '100': '#def7ec',
        '200': '#bcf0da',
        '300': '#84e1bc',
        '400': '#31c48d',
        '500': '#0e9f6e',
        '600': '#057a55',
        '700': '#046c4e',
        '800': '#03543f',
        '900': '#014737',
      },
      teal: {
        '50': '#edfafa',
        '100': '#d5f5f6',
        '200': '#afecef',
        '300': '#7edce2',
        '400': '#16bdca',
        '500': '#0694a2',
        '600': '#047481',
        '700': '#036672',
        '800': '#05505c',
        '900': '#014451',
      },
      blue: {
        '50': '#ebf5ff',
        '100': '#e1effe',
        '200': '#c3ddfd',
        '300': '#a4cafe',
        '400': '#76a9fa',
        '500': '#3f83f8',
        '600': '#1c64f2',
        '700': '#1a56db',
        '800': '#1e429f',
        '900': '#233876',
      },
      indigo: {
        '50': '#f0f5ff',
        '100': '#e5edff',
        '200': '#cddbfe',
        '300': '#b4c6fc',
        '400': '#8da2fb',
        '500': '#6875f5',
        '600': '#5850ec',
        '700': '#5145cd',
        '800': '#42389d',
        '900': '#362f78',
      },
      purple: {
        '50': '#f6f5ff',
        '100': '#edebfe',
        '200': '#dcd7fe',
        '300': '#cabffd',
        '400': '#ac94fa',
        '500': '#9061f9',
        '600': '#7e3af2',
        '700': '#6c2bd9',
        '800': '#5521b5',
        '900': '#4a1d96',
      },
      pink: {
        '50': '#fdf2f8',
        '100': '#fce8f3',
        '200': '#fad1e8',
        '300': '#f8b4d9',
        '400': '#f17eb8',
        '500': '#e74694',
        '600': '#d61f69',
        '700': '#bf125d',
        '800': '#99154b',
        '900': '#751a3d',
      },
    },
    extend: {
      maxHeight: {
        '0': '0',
        xl: '36rem',
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
      animation: {
    fadeIn: "fadeIn 2s ease-in forwards"
  },
       keyframes: {
         fadeIn: {
          "0%": { opacity: 0 },
          "100%": { opacity: 1 }
        }
  }
    },
  },
  variants: {
    backgroundColor: [
      'hover',
      'focus',
      'active',
      'odd',
      'dark',
      'dark:hover',
      'dark:focus',
      'dark:active',
      'dark:odd',
    ],
    display: ['responsive', 'dark'],
    textColor: [
      'focus-within',
      'hover',
      'active',
      'dark',
      'dark:focus-within',
      'dark:hover',
      'dark:active',
    ],
    placeholderColor: ['focus', 'dark', 'dark:focus'],
    borderColor: ['focus', 'hover', 'dark', 'dark:focus', 'dark:hover'],
    divideColor: ['dark'],
    boxShadow: ['focus', 'dark:focus'],
    animation: ["motion-safe"]
  },
  plugins: [
    require('tailwindcss-multi-theme'),
    require('@tailwindcss/custom-forms'),
    plugin(({ addUtilities, e, theme, variants }) => {
      const newUtilities = {}
      Object.entries(theme('colors')).map(([name, value]) => {
        if (name === 'transparent' || name === 'current') return
        const color = value[300] ? value[300] : value
        const hsla = Color(color).alpha(0.45).hsl().string()

        newUtilities[`.shadow-outline-${name}`] = {
          'box-shadow': `0 0 0 3px ${hsla}`,
        }
      })

      addUtilities(newUtilities, variants('boxShadow'))
    }),
  ],
}

form compoenents
app.scss

/* This file is for your main application css. */

/* Tailwind Directives */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* AOS styles  */
@import "../node_modules/aos/src/sass/aos";

/* components */
@import "./components/form.css";

@import "../node_modules/nprogress/nprogress.css";

[hidden] {
  display: none !important;
}

@media (min-width: 1024px) {
  .top-navbar {
    display: inline-flex !important;
  }

/* LiveView specific classes for your customizations */
.phx-no-feedback.invalid-feedback,
.phx-no-feedback .invalid-feedback {
  display: none;
}

.phx-click-loading {
  opacity: 0.5;
  transition: opacity 1s ease-out;
}

.phx-disconnected {
  cursor: wait;
}
.phx-disconnected * {
  pointer-events: none;
}

.phx-modal {
  opacity: 1 !important;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
}

.phx-modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.phx-modal-close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.phx-modal-close:hover,
.phx-modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* Alerts and form errors */
.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert-info {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.alert-warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.alert-danger {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.alert p {
  margin-bottom: 0;
}
.alert:empty {
  display: none;
}
.invalid-feedback {
  color: #a94442;
  display: block;
  margin: -1rem 0 2rem;
}
}

form.css

/* common components for CONTS */

.basic-form-input {
  @apply form-input block w-full mt-1 text-sm;
}

.basic-form-label {
  @aplly block mt-4 text-sm;
}

How I use
I created a new input/2 function that have this custom classes basic-form*, as:

defmodule Conts.InputHelpers do
  @moduledoc """
  Define <%= input f, :pass, type: :password_input %> syntax
  to create dynamic form inputs
  """

  use Phoenix.HTML

  alias Phoenix.HTML.Form, as: PhxForm
  import ContsWeb.ErrorHelpers, only: [error_tag: 2]

  @label_opts "basic-form-label"
  @input_opts "basic-form-input"

  def input(form, field, opts \\ []) do
    label_text = opts[:label] || humanize(field)
    type = opts[:type] || PhxForm.input_type(form, field)

    label_opts = [class: @label_opts]
    input_opts = [class: "#{@input_opts} #{state_class(form, field)}"]

    label_opts = if opts[:id], do: [for: opts[:for]] ++ label_opts, else: label_opts

    content_tag :fieldset do
      label = label(form, field, label_text, label_opts)
      input = input(type, form, field, input_opts)
      error = error_tag(form, field)

      error = if Enum.empty?(error), do: "", else: error

      [label, input, error]
    end
  end

  defp state_class(form, field) do
    cond do
      # The form was not yet submitted
      !form.action -> ""
      form.errors[field] -> "border-red-500"
      true -> "border-blue-500"
    end
  end

  # Implement clauses below for custom inputs.
  # defp input(:datepicker, form, field, input_opts) do
  #   raise "not yet implemented"
  # end
  defp input(:password_confirmation, form, field, input_opts) do
    apply(PhxForm, :password, [form, field, input_opts])
  end

  defp input(type, form, field, input_opts) do
    apply(PhxForm, type, [form, field, input_opts])
  end
end

Screenshot
No focus:

With focus:

Input inspect styles:

Maybe can be a newbie error from my part but I'm not getting how to debbug or solve this issue.

Answer 1 · 2021-03-27T22:04:40.000Z

Hey! This plugin is deprecated and not compatible with Tailwind CSS v2.0. You want to check out the @tailwindcss/forms plugin instead for 2.0 support 👍🏻

Answer 2 · 2021-03-27T22:11:09.000Z

As @tailwindcss/custom-forms does not works with tailwind v2.0+ I'm moving this issue to @tailwind/forms: tailwindlabs/tailwindcss-forms#62

Answer 3 · 2021-03-27T22:11:56.000Z

Hey! This plugin is deprecated and not compatible with Tailwind CSS v2.0. You want to check out the @tailwindcss/forms plugin instead for 2.0 support 👍🏻

Oh, thanks! Some research after I posted this issue I found this exacly explanation! I didn't see that you answered.