tailwind css

css를 빠르고 쉽게 개발하는데 도와주는 css 프레임워크
React.js에 적용해보기

tailwind css 설치 및 config 파일 생성

yarn add -D tailwindcss
npx tailwindcss init

config 파일 수정

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

index.css 추가하기

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

내맘대로 className정해서 적용하기

• tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  darkMode: 'class',
  important: true,
  content: [
    './src/components/**/*.{html,js}',
    './src/container/**/*.{html,js}',
    './src/layout/**/*.{html,js}',
    './src/redux/**/*.{html,js}',
    './src/routes/**/*.{html,js}',
    './src/**/*.{js,jsx,ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        primary: '#e54028',
        'primary-hover': 'rgb(168, 38, 38)',
        'primary-transparent': 'rgba(130, 49, 211, 0.082)',
        ...
      },
      boxShadow: {
        regular: '0 5px 20px rgba(160,160,160,0.05)',
        ...
      },
      borderWidth: {
        1: '1px',
        5: '5px',
      },
      borderRadius: {
        4: '4px',
        6: '6px',
        10: '10px',
      },
      fontFamily: {
        Jost: ['Jost', 'sans-serif'],
        Awesome: ['FontAwesome'],
      },
      fontSize: {
        10: ['10px', '14px'],
        11: ['11px', '15px'],
        13: ['13px', '18px'],
        15: ['15px', '24px'],
        17: ['17px', '26px'],
        22: ['22px', '30px'],
        42: ['42px', '62px'],
        58: ['58px', '86px'],
      },
      zIndex: {
        998: '998',
        99998: '99998',
      },
    },
    screens: {
      '4xl': { max: '1699px' },
      '3xl': { max: '1599px' },
      '2xl': { max: '1299px' },
      xl: { max: '1199px' },
      lg: { max: '991px' },
      lgmd: { max: '850px' },
      md: { max: '767px' },
      sm: { max: '575px' },
      ssm: { max: '480px' },
      xs: { max: '380px' },
      xxs: { max: '320px' },
      'min-xxs': '320px',
      'min-xs': '380px',
      'min-ssm': '480px',
      'min-sm': '575px',
      'min-md': '768px',
      'min-lg': '991px',
      'min-xl': '1199px',
      'min-2xl': '1299px',
      'min-3xl': '1599px',
      'min-4xl': '1699px',
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

공식문서