1
npm install -D tailwindcss
2
npx tailwindcss init

1
/** @type {import('tailwindcss').Config} */
2
module.exports = {
3
  content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
4
  theme: {
5
    extend: {},
6
  },
7
  plugins: [],
8
}

1
/* tailwind 기본 스타일 및 확장된 스타일 주입 */
2
@tailwind base;
3

4
/* tailwind 기본 컴포넌트 클래스 및 확장된 컴포넌트 클래스 주입 */
5
@tailwind components;
6

7
/* tailwind 기본 유틸리티 클래스 및 확장된 유틸리티 클래스 주입 */
8
@tailwind utilities;

1
import React from 'react'
2

3
export default function Background() {
4
  return (
5
    <div className="bg-gray-700" style={{ height: 600 }}>
6
      <div style={{ height: 100 }}>
7
        <div style={{ height: 'inherit' }} class="bg-sky-500/100"></div>
8
        <div style={{ height: 'inherit' }} class="bg-sky-500/75"></div>
9
        <div style={{ height: 'inherit' }} class="bg-sky-500/50"></div>
10
      </div>
11
    </div>
12
  )
13
}

1
import Background from './Background'
2

3
export default function TailwindExample() {
4
  return (
5
    <div>
6
      <Background />
7
    </div>
8
  )
9
}

1
// Webpack CSS import
2
// import 'onsenui/css/onsenui.css';
3
// import 'onsenui/css/onsen-css-components.css';
4
// import OnesenUIExample from './components/OnsenUI/OnesenUIExample';
5
// import AntDesignExample from './components/AntDesign/AntDesignExample';
6
// import 'semantic-ui-css/semantic.min.css';
7
// import ReactSemanticUIExample from './components/ReactSemanticUI/ReactSemanticUIExample';
8
// import 'bootstrap/dist/css/bootstrap.min.css';
9
// import ReactBootstrapExample from './components/ReactBootstrap/ReactBootstrapExample';
10
// import MaterialUIExample from './components/MaterialUI/MaterialUIExample';
11
import TailwindExample from './components/Tailwind/TailwindExample'
12

13
export default function App() {
14
  return (
15
    <>
16
      <TailwindExample />
17
      {/* <MaterialUIExample /> */}
18
      {/* <ReactBootstrapExample /> */}
19
      {/* <ReactSemanticUIExample /> */}
20
      {/* <AntDesignExample /> */}
21
      {/* <OnesenUIExample /> */}
22
    </>
23
  )
24
}

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

1
// postcss.config.js
2
module.exports = {
3
  plugins: {
4
    tailwindcss: {},
5
    autoprefixer: {},
6
  },
7
}

1
import type { Config } from 'tailwindcss'
2

3
const config: Config = {
4
  content: [
5
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
6
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
7
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
8
  ],
9
  theme: {
10
    extend: {},
11
  },
12
  plugins: [],
13
}
14
export default config

1
/* globals.css */
2
@tailwind base;
3
@tailwind components;
4
@tailwind utilities;

1
<!-- 1.rem, px -->
2
<!-- <div class="w-4 w-[20px] w-4">111</div> -->
3

4
<!-- 2. bg, border, border-color, rounded -->
5
<!-- <div class="bg-pink-400 w-64 h-64 border-8 border-black rounded-[25px]">111</div> -->
6

7
<!-- 3. w, h, p(패딩), m(마진) -->
8
<!-- <div class="w-64 h-64 bg-pink-400 w-[350px] h-[350px] p-4 p-[20px] m-4 mx-10 my-20">111</div> -->
9

10
<!-- 4. text-color, text-size, font-bold, cursor -->
11
<!-- <div class="w-64 h-64 bg-black text-pink-400 text-[50px] font-[100] cursor-pointer">111</div> -->
12

13
<!-- 5. flex, flex-col, justify, item, gap -->
14
<!-- <div class="h-64 w-64 bg-pink-400 text-[50px] text-black flex justify-center itewms-center">111</div> -->
15

16
<!-- <div class="h-[750px] w-[750px] bg-black flex flex-col justify-center items-center gap-4">
17
	<div class="flex h-64 w-64 items-center justify-center bg-pink-400 text-[50px] text-black">111</div>
18
	<div class="flex h-64 w-64 items-center justify-center bg-pink-400 text-[50px] text-black">222</div>
19
</div> -->
20

21
<!-- 6. hover, transition -->
22
<!-- <div class="h-[750px] w-[750px] flex-col items-center justify-center gap-4 bg-black">
23
  <div
24
    class="hover:bg-purple-400 transition flex h-64 w-64 items-center justify-center bg-pink-400 text-[50px] text-black"
25
  >
26
    111
27
  </div>
28
  <div
29
    class="hover:text-purple-400 transition-colors flex h-64 w-64 items-center justify-center bg-pink-400 text-[50px] text-black"
30
  >
31
    222
32
  </div>
33
</div> -->
34

35
<!-- e.g. 픽트로그램 -- 신호등 + 횡단보도 -->
36
<section class="bg-neutral-700 flex flex-row justify-between items-center h-[250px] w-full group">
37
  <div class="flex flex-row gap-4 group-hover:bg-yellow-400">
38
    <div class="w-4 h-[150px] bg-white"></div>
39
    <div class="w-4 h-[150px] bg-white"></div>
40
    <div class="w-4 h-[150px] bg-white"></div>
41
    <div class="w-4 h-[150px] bg-white"></div>
42
    <div class="w-4 h-[150px] bg-white"></div>
43
  </div>
44
  <div class="flex flex-row justify-center items-center gap-3">
45
    <div class="w-32 h-32 bg-red-500 rounded-full border-2 border-black hover:bg-red-300 transition"></div>
46
    <div class="w-32 h-32 bg-yellow-500 rounded-full border-2 border-black hover:bg-yellow-300 transition"></div>
47
    <div class="w-32 h-32 bg-green-500 rounded-full border-2 border-black hover:bg-green-300 transition"></div>
48
  </div>
49
  <div class="flex flex-row gap-4 group-hover:bg-pink-400">
50
    <div class="w-4 h-[150px] bg-white"></div>
51
    <div class="w-4 h-[150px] bg-white"></div>
52
    <div class="w-4 h-[150px] bg-white"></div>
53
    <div class="w-4 h-[150px] bg-white"></div>
54
    <div class="w-4 h-[150px] bg-white"></div>
55
  </div>
56
</section>

1
npm install -D prettier prettier-plugin-tailwindcss