[CSS] Tailwind css란? / 사용법

👉 Tailwind css란?

HTML 안에서, CSS 스타일을 만들 수 있게 해주는 CSS 프레임워크

 

필요성

어떤 부분에, 어떤 스타일을 적용하는지 한눈에 볼 수 있게 해준다!

 

PostCSS 플러그인으로 설치

npm install -D tailwindcss postcss autoprefixer

# postcss와 tailwindcss, autoprefixer 플러그인을 설치

 

PostCSS란?

[CSS/Node.js] PostCSS란? 사용법, 플러그인 추천

 

PostCSS 설정

//postcss.config.js

module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
  }
}

 

Tailwind css 초기 설정

npx tailwindcss init

 

설정 파일 수정

// tailwind.config.js

module.exports = {
  content: [
    "./src/**/*.{js,ts,jsx,tsx}", // 적용할 js파일 경로 지정
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

 

CSS에 Tailwind 넣기

/* styles.css */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

 

Tailwind 커스터 마이징하기

// tailwind.config.js

// 컬러를 커스터마이징하기 위한 tailwindcss/colors 모듈 불러오기

const colors = require('tailwindcss/colors')

module.exports = {
  darkMode: false, // or 'media' or 'class'
  theme: {
    // extend와 겹치는 설정이 있을 경우 기본 css 스타일을 우선시한다.
    
    extend: {
      
      // 내가 원하는 컬러를 기본 컬러로 지정해서 사용할 수 있다.
      color: {
        gray: colors.coolGray,
        blue: colors.lightBlue,
        red: colors.rose,
        pink: colors.fuchsia,
      },
      
      // 내가 원하는 폰트를 기본 폰트로 지정할 수 있다.
      fontFamily: {
        sans: ["Grapik", "sans-serif"],
        serif: ["Merriweather", "serif"],
      }
    }
  },
  ...
}

 

Tailwind 사용법

<button class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700">
    Hello, Tailwind CSS!
</button>

 

Tailwind 적용된 버튼

 

수치 입력
ml	margin-left;
mx	margin-left margin-right;
my	margin-top margin-bottom;
pl	padding-left;
px	padding-left padding-right;
py	padding-top padding-bottom;
w	witdh;
max-w	max-width;
h	height;
max-h	max-height;
ml-2 형식으로 사용한다 / margin-left : 2px;
auto	auto;
full	100%;
screen	100vh or 100vw;

 

Display
block	display: block;
inline-block	display:inline-block;
inline	display: inline;
flex	display: flex
inline-flex	display: inline-flex;
table	display: table;
table-row	display: table-row;
table-cell	display: table-cell;
hidden	display: none;

 

Position
static	position: static;
fixed	position: fixed;
absolute	position: absolute;
relative	position: relative;
sticky	position: sticky;

 

Top / Right / Bottom / Left
inset-0	top: 0; right: 0; bottom: 0; left: 0;
inset-x-0	right: 0; left: 0;
inset-y-0	top: 0; bottom: 0;
top-0	top: 0;
right-0	right: 0;
bottom-0	bottom: 0;
left-0	left: 0;

 

Text Transform
uppercase	text-transform: uppercase;
lowercase	test-transform: lowercase;
capitalize	test-transform: capitalize;
normal-case	test-transform: none;

 

z-index
z-0	z-index: 0;
z-10	z-index: 10;
z-auto	z-index: auto;

 

Font-size
text-xs	font-size: .75rem;
text-sm	font-size: .875rem;
text-base	font-size: 1rem;
text-lg	font-size: 1.125rem;
text-2xl	font-size: 1.5rem;
text-3cl	font-size: 1.875rem;

 

Line-height
leading-none	line-height: 1;
leading-tight	line-height: 1.25;
leading-snug	line-height: 1.375;
leading-normal	line-height: 1.5;
leading-relaxed	line-height: 1.625;
leading-loose	line-height: 2;

 

Font-weight
font-hairline	font-weight: 100;
font-thin	font-weight: 200;
font-light	font-weight: 300;
font-normal	font-weight: 400;
font-medium	font-weight: 500;
font-semibold	font-weight: 600;
font-bold	font-weight: 700;
font-extrabold	font-weight: 800;
font-black	font-weight: 900;

 

Background-color
bg-transparent	background-color: transparent;
bg-black	background-color: #000;
bg-white	background-color: #fff;
be-gray-100	background-color: #f7fafc;

 

Border style
border-solid	border-style: solid;
border-dashed	border-style: dashed;
border-dotted	border-style: dotted;
border-double	border-style: double;
border-none	border-style: none;

 

Border color
border-transparent	border-color: transparent;
border-black	border-color: #000;
border-white	border-color: #fff;
border-gray-100	border-color: #f7fafc;

 

Border size
border	border-width: 1px;
border-0	border-width: 0;
border-2	border-width: 2px;
border-4	border-width: 4px;
border-t	border-top-width: 1px;
border-r	border-right-width: 1px;
border-b	border-bottom-width: 1px;
border-l	border-left-width: 1px;

 

Border radius
rounded-none	border-radius: 0;
rounded-sm	border-radius: .125rem;
rounded	border-radius: .25rem;
rounded-lg	border-radius: .5rem;
rounded-full	border-radius: .9999px;
rounded-tl-none	border-top-left-radius: 0;
rounded-tr-none	border-top-right-radius: 0;
rounded-bl-none	border-bottom-left-radius: 0;
rounded-br-none	border-bottom-right-radius: 0;
rounded-tl-full	border-top-left-radius: 9999px;
rounded-tr-full	border-top-right-radius: 9999px;
rounded-bl-full	border-bottom-left-radius: 9999px;
rounded-br-full	border-bottom-right-radius: 9999px;

 

Width / Height ( w를 h로 변경하면 height )
w-0	width: 0;
w-1	width: 0.25rem;
...	...
w-auto	width: auto;
w-px	width: 1px;
w-1/2	width: 50%;
w-1/3	width: 33.333333%;
...	...
w-10/12	width: 83.333333%;
w-11/12	width: 91.666667%;
w-full	width: 100%;
w-screen	width: 100vw;

 

Padding / Margin ( p를 m으로 변경하면 Margin )
전체 조작
p-0	padding: 0;
p-1	padding: 0.25rem;
각자 조작
px-0	padding-left: 0; padding-right: 0;
px-1	padding-left: 0.25rem; padding-right: 0.25rem;
py-0	padding-top: 0; padding-bottom: 0;
py-1	padding-top: 0.25rem; padding-bottom: 0.25rem;
pt-0	padding-top: 0;
pt-1	padding-top: 0.25rem;
pb-0	padding-bottom: 0;
pb-1	padding-bottom: 0.25rem;
pl-0	padding-left: 0;
pl-1	padding-left: 0.25rem;
pr-0	padding-right: 0;
pr-1	padding-right: 0.25rem;
픽셀 조작
p-px	padding: 1px;
px-px	padding-right: 1px; padding-left: 1px;
py-px	padding-top: 1px; padding-bottom: 1px;
pt-px	padding-top: 1px;
pb-px	padding-bottom: 1px;
pl-px	padding-left: 1px;
pr-px	padding-right: 1px;

 

Cursor
cursor-auto	cursor: auto;
cursor-default	cursor: default;
cursor-pointer	cursor: pointer;
cursor-wait	cursor: wait;
cursor-text	cursor: text;
cursor-move	cursor: move;
cursor-not-allowed	cursor: not-allowed;

 

Opacity
opacity-100	opacity: 1;
opacity-75	opacity: .75;
opacity-50	opacity: .5;
opacity-25	opacity: .25;
opacity-0	opacity: 0;