tailwindcss 완벽 세팅 (feat Next.js)

yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

@tailwind base;
@tailwind components;
@tailwind utilities;

yarn add -D clsx tailwind-merge

import type { ClassValue } from 'clsx'
import { clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

+ const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ['./src/**/*.{ts,tsx}'],
  theme: {
    extend: {
+      fontFamily: {
+        sans: ['var(--font-spoqa)', ...fontFamily.sans],
+      },
    },
  },
  plugins: [],
}

import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <>
      <div className='font-sans'>
        <Component {...pageProps} />
      </div>
    </>
  )
}

{
    "css.lint.unknownAtRules": "ignore",
}

/** @type {import('tailwindcss').Config} */
module.exports = {
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
  // ...
}