[react/javascript] 리액트+tailwindcss+twin.macro

[react/javascript] 리액트+tailwindcss+twin.macro

 

# 리액트 설치

npx create-react-app my-app

 

#  emotion / tailwind / twin.macro 설치 

npm i @emotion/css @emotion/react @emotion/styled
npm i -D tailwindcss postcss autoprefixer
npm i twin.macro 
npx tailwindcss init -p

 

# ./tailwind.config.js

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

#./src/index.css

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

 

# App.js

/** @jsxImportSource @emotion/react */
import './App.css';
import tw from 'twin.macro';

function App() {
  const color = "white";
  const Input = () => <input tw="border hover:border-black bg-red-500" />
  return (
    <div
      css={tw`bg-red-100`}
    >
      <Input/>  
      안녕하세요
    </div>
  );
}

export default App;

 

#react #emotion #tailwind #twin.macro