web-dev-qa-db-fra.com

Comment spécifier la hauteur: Contenu Fit avec TailWindcss?

Utiliser Tailwindcss J'essaie d'avoir un <div> apte à la hauteur de son enfant, un <button>. Mon code est comme suit:

<form className="w-full flex h-96 gap-2 mt-8 flex-wrap">
     <textarea
          role="text-input"
          className="resize-none flex-1"
          placeholder="INPUT"
     />
     <textarea
          role="text-output"
          className="resize-none flex-1"
          placeholder="OUTPUT"
          readOnly
      />
      <div className="w-full flex flex-none"> // This is the troublesome div
          <button>
                Submit!
          </button>
      </div>
</form>

Lire à travers - les docs et faire une recherche Google, je ne peux pas sembler trouver un moyen de le faire, idéalement je voudrais définir une classe telle que h-fit-content (quelque chose comme ça) mais cela ne semble pas exister.

Merci d'avance!

cssreactjstailwind-css
5
Pedro Filipe

vous pouvez créer des classes personnalisées dans votre configuration de l'emballage pour une utilisation future.

exemple:

module.exports = {
  important: true,
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        ...
      },
      animation: {
       ...
      },
      width: {
        ...
      },
      margin: {
        ...
      },
      height: {
        76: '18rem',
        78: '19rem',
        82: '22rem',
        97: '28rem',
        98: '31rem',
        99: '38rem',
        100: '40rem',
        'h-fit-content': 'fit-content(20em)',
      },
      fontFamily: {
        mps: ['Clarkson', 'Helvetica', 'sans-serif']
      },
      flex: {
        2: '1 1 25%',
        3: '1 1 30%',
        4: '1 1 40%',
        5: '1 1 50%',
        6: '1 1 60%',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
1
james williams