Archive
TailwindCSS

TailwindCSS

styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;
 
@layer base {
  html,
  body {
    @apply min-h-screen;
  }
  input,
  select,
  textarea {
    @apply border border-neutral-500;
  }
  button {
    @apply outline-none hover:brightness-105 focus:outline-none active:brightness-95;
  }
}
 
@layer components {
  .required {
    @apply after:text-red-500 after:content-['*'];
  }
}
npm install prettier-plugin-tailwindcss --dev
tailwind.config.js
const plugin = require('tailwindcss/plugin')
 
/** @type {import("tailwindcss").Config } */
module.exports = {
  plugins: [
    require('prettier-plugin-tailwindcss'),
    plugin(function ({ addComponents }) {
      addComponents({
        '.break-keep': {
          wordBreak: 'keep-all'
        }
      })
    })
  ]
}

© 2023 kidow. All rights reserved.
안녕하세요?