【Web Library】Nextjs13で覚える便利なライブラリ【#８@tailwindcss/forms】

【#８@tailwindcss/forms】

YouTube: https://youtu.be/h2RCCKYh81Y

https://youtu.be/h2RCCKYh81Y

今回は前回作成したフォームのスタイルを調整していきます。

まずは、こちらから「@tailwindcss/forms」をインストールします。

https://www.npmjs.com/package/@tailwindcss/forms?activeTab=readme

npm i @tailwindcss/forms

  "dependencies": {
    "@tailwindcss/forms": "0.5.3",
  },

こちらのインストールができましたら上記ライブラリを
「tailwind.config.js」にプラグインとして設定します。

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './page/**/*.{js,ts,jsx,tsx}',
    './ui/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      // https://vercel.com/design/color
      colors: {
        vercel: {
          pink: '#FF0080',
          blue: '#0070F3',
          cyan: '#50E3C2',
          orange: '#F5A623',
          violet: '#7928CA',
        },
      },
      keyframes: ({ theme }) => ({
        rerender: {
          '0%': {
            'border-color': theme('colors.vercel.pink'),
          },
          '40%': {
            'border-color': theme('colors.vercel.pink'),
          },
        },
        highlight: {
          '0%': {
            background: theme('colors.vercel.pink'),
            color: theme('colors.white'),
          },
          '40%': {
            background: theme('colors.vercel.pink'),
            color: theme('colors.white'),
          },
        },
        shimmer: {
          '100%': {
            transform: 'translateX(100%)',
          },
        },
        translateXReset: {
          '100%': {
            transform: 'translateX(0)',
          },
        },
        fadeToTransparent: {
          '0%': {
            opacity: 1,
          },
          '40%': {
            opacity: 1,
          },
          '100%': {
            opacity: 0,
          },
        },
      }),
    },
  },
  plugins: [require('@tailwindcss/forms')],
};

ここまでできましたら、フォームの各要素にスタイルを適用していきます。

app/formik/basic/page.tsx

'use client';
import { Formik, Form, Field, ErrorMessage, FormikErrors } from 'formik';

interface FormikValues {
  email: string;
  password: string;
}

const Page = () => {
  return (
    <div className="text-white">
      <h1 className="mb-4 text-center text-3xl font-bold">
        Any place in your app!
      </h1>
      <Formik
        initialValues={{ email: '', password: '' }}
        validate={(values) => {
          const errors: FormikErrors<FormikValues> = {};

          if (!values.email) {
            errors.email = 'Required';
          } else if (
            !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)
          ) {
            errors.email = 'Invalid email address';
          }

          return errors;
        }}
        onSubmit={(values, { setSubmitting }) => {
          setTimeout(() => {
            alert(JSON.stringify(values, null, 2));

            setSubmitting(false);
          }, 400);
        }}
      >
        {({ isSubmitting }) => (
          <Form className="flex flex-col items-center gap-3">
            <Field type="email" name="email" className="text-gray-900" />
            <ErrorMessage
              name="email"
              component="div"
              className="text-red-500"
            />
            <Field type="password" name="password" className="text-gray-900" />
            <ErrorMessage
              name="password"
              component="div"
              className="text-red-500"
            />
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
};

export default Page;

こちらは、ファイルの保存で表示が変わらない場合は、
ブラウザのリロードをかける必要があります。