[TS]테일윈드 CSS 프로젝트 만들기 + 가짜데이터 생성기

 

1. 프로젝트 생성

npx create-react-app ch03_2 --template typescript

 

2. 패키지 설치

npm i -D postcss autoprefixer tailwindcss

 

3. 구성파일 생성

npx tailwindcss init -p

 

4. 패키지 추가설치

npm i -D daisyui @tailwindcss/line-clamp

 

5. 구성파일수정( tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
}

 

6. 필요 유틸 작성 ( 가짜 데이터 생성기)

src/data/utils.ts

export const makeArray = (length: number) => new Array(length).fill(null);
export const range = (min: number, max: number): number[] => makeArray(max - min).map((notUsed, index) => index + min);
export const random = (min: number, max: number): number => Math.floor(Math.random() * (max - min)) + min;

 

- 패키지 설치

npm i chance luxon

npm i -D @types/chance @types/luxon

 

src/data/chance.ts

import { Chance } from 'chance';

const chance = new Chance();

export const randomUUID = () => chance.guid();
export const randomName = () => chance.name();
export const randomEmail = () => chance.email();
export const randomId = () => chance.fbid();
export const randomJobTitle = () => chance.profession();
export const randomCompanyName = () => chance.company();
export const randomSentence = (words = 5) => chance.sentence({ words });
export const randomTitleText = (words = 3) => chance.sentence({ words });
export const randomParagraphs = (sencences = 3) => chance.paragraph({ sencences });

 

/src/data/date.ts

import { DateTime } from 'luxon';

export const makeRandomPastDate = () => {
	const value = new Date().valueOf();
	const n = 100000;
	return new Date(value - Math.floor(Math.random() * n * n));
};

export const makeRelativeDate = (date: Date) => DateTime.fromJSDate(date).startOf('day').toRelative();
export const randomRelativeDate = () => makeRelativeDate(makeRandomPastDate());

export const makeDayMonthYear = (date: Date) => DateTime.fromJSDate(date).toLocaleString(DateTime.DATE_FULL);
export const randomDayMonthYear = () => makeDayMonthYear(makeRandomPastDate());

 

편하게 쓸수 있게 index.ts 파일을 만든다.

 

/src/data/index.ts

export * from './util';
export * from './chance';
export * from './date';

 

-  테스트용 파일작성

/src/App.tsx

import * as D from './data';

export default function App() {
	return (
		<div>
			<p>
				{D.randomName()}, {D.randomJobTitle()}, {D.randomDayMonthYear()}
			</p>
		</div>
	);
}

새로고침 할때마다 바뀌는 데이터 확인!

 

7. 테일윈드 CSS 반영

src/index.css

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

 

8. 테일윈드 테스트 코드 작성

src/pages/Tailwindcss.tsx

import * as D from '../data';

export default function Tailwindcss() {
	return (
		<div className='bg-black/70'>
			<p className='w-full p-4 text-3xl text-white'>Tailwindcss</p>
			<p className='italic text-gray-50 line-clamp-3'>{D.randomParagraphs(10)}</p>
			<button className='btn btn-primary' style={{ textTransform: 'none' }}>
				Button{' '}
			</button>
		</div>
	);
}

 

src/App.tsx

import Tailwindcss from './pages/Tailwindcss';

export default function App() {
	return (
		<div>
			<Tailwindcss />
		</div>
	);
}

 

사용방법 문서!!

Install Tailwind CSS using PostCSS - Tailwind CSS

Install Tailwind CSS using PostCSS - Tailwind CSS

이제 부트스트랩에서 벗어나서 더좋은? 걸로 써봅시다.