Skip to content

Commit

Permalink
[FE][Feat] : tailwindcss 및 reset css 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
effozen committed Nov 5, 2024
1 parent 58a6a3a commit 7e41f1e
Show file tree
Hide file tree
Showing 5 changed files with 621 additions and 139 deletions.
3 changes: 3 additions & 0 deletions FrontEnd/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,12 +35,15 @@
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react-swc": "^3.5.0",
"autoprefixer": "^10.4.20",
"eslint": "^9.13.0",
"eslint-plugin-react-hooks": "^5.0.0",
"eslint-plugin-react-refresh": "^0.4.14",
"eslint-plugin-storybook": "^0.11.0",
"globals": "^15.11.0",
"postcss": "^8.4.47",
"storybook": "^8.4.2",
"tailwindcss": "^3.4.14",
"typescript": "~5.6.2",
"typescript-eslint": "^8.11.0",
"vite": "^5.4.10"
Expand Down
6 changes: 6 additions & 0 deletions FrontEnd/postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
105 changes: 50 additions & 55 deletions FrontEnd/src/index.css
Original file line number Diff line number Diff line change
@@ -1,68 +1,63 @@
:root {
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
/* src/index.css */

color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
@tailwind base;
@tailwind components;
@tailwind utilities;

font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box; /* padding과 border를 box 크기에 포함 */
}

body {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}

h1 {
font-size: 3.2em;
line-height: 1.1;
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}

button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
body {
line-height: 1;
}
button:hover {
border-color: #646cff;
ol, ul {
list-style: none;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
blockquote, q {
quotes: none;
}

@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
10 changes: 10 additions & 0 deletions FrontEnd/tailwind.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
// tailwind.config.js
module.exports = {
content: [
'./src/**/*.{html,js,jsx,ts,tsx}', // Tailwind가 처리할 파일 경로를 지정
],
theme: {
extend: {}, // 필요한 커스터마이징을 여기서 설정 가능
},
plugins: [],
};
Loading

0 comments on commit 7e41f1e

Please sign in to comment.