[nextjs+ts]프로젝트 02. TailwindCSS 설정

[nextjs+ts]프로젝트 02. TailwindCSS 설정

 

[설치]

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install -D prettier prettier-plugin-tailwindcss

[경로 설정] - tailwind.config.js

module.exports = {
  content: ["./pages/**/*.{js,jsx,ts,tsx}","./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

[글로벌 지정] - index.css

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

 

[테스트 코드] - index.tsx

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div className='bg-red-500' >
      <h1 className='text-blue-100' >it works</h1>
    </div>
  )
}

export default Home

 

vscode에서 tailwindcss intelisense 설치

 

#nextjs #ts #TailwindCSS