TailwindCSS ์๋ฒฝ ๋ง์คํฐ: ํฌํธํด๋ฆฌ์ค๋ถํฐ ์ด๋๋ฏผ๊น์ง!
ํ ๊ฐ์๋ก ๋๋ด๋ TailwindCSS ์ ๋ฌธ๋ถํฐ ์ค์ ๊น์ง! ๋ ๊ฐ์ ํ๋ก์ ํธ์ ํจ๊ป ๋ ์ด์์ ๊ตฌ์ฑ๋ถํฐ ๋ฐ์ํ ๋์์ธ! ๋คํฌ๋ชจ๋! ๊น์ง ์๋ฒฝํ๊ฒ ๋ฐฐ์๋ณด์ธ์.
์๊ฐ์ 521๋ช
๋์ด๋ ์ด๊ธ
์๊ฐ๊ธฐํ ๋ฌด์ ํ

- ๋ฏธํด๊ฒฐ
tailwindcss v4.1 ์์์ script ์ฌ์ฉ์ ๋ํด ๊ถ๊ธํ ์ ์ด ์์ต๋๋ค.
์ปจํ ์ด๋(Container) ๊ฐ์ ์ค 6๋ถ 59์ด์ ๋์ค๋ ์๋ฉํฑ ํ๊ทธ ์์ ์์ฑ๋ tailwind.config ๋ ์ต์ ๋ฒ์ ์์ ์๋ํ์ง ์๋๋ฐ ์ด๋ป๊ฒ ํ๋ฉด ์ฌ์ฉํ ์ ์๋์?
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcss์นํ
ใป
4๋ฌ ์
1
70
1
- ๋ฏธํด๊ฒฐ
ํ์ฅ ํ๋ก๊ทธ๋จ ์ค์น ๋ฐ ์ต์ ํ ๋ฒ์ ๋ฌธ์
tailwindcss ๊ณต์ ํ์ด์ง๋ v4.1๋ก ๋์ด ์๋๋ฐ ๊ฐ์ํ์ ๋ฒ์ ์ v3.4.13 ์ผ๋ก ๋์ด ์๋ค์v 4.1๋ฒ์ ๊ณผ ์ค์ ์ต์ ๋ค์ด ์กฐ๊ธ ๋ฌ๋ผ์ ๋ฌธ์ ๋๋ฆฝ๋๋ค
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssJiA
ใป
5๋ฌ ์
1
78
2
- ๋ฏธํด๊ฒฐ
tailwindcss ์ ai tool
ai tool(cursor, claude code ...) ์์ tawilwindcss ๋ฅผ ๋ค๋ฃฐ ๋, ํ์ด๋ ์ฃผ์ํด์ผ ํ ์ ์ ๋ํด์ ๊ณต์ ํด์ฃผ์ ๋ ์ข์๊ฒ ๊ฐ๋ค๋ ์๊ฐ์ด ๋ค์์ต๋๋ค. <span data-name="slig
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssJiho Bak
ใป
5๋ฌ ์
0
55
1
- ๋ฏธํด๊ฒฐ
tailwindcss 4.1 docs์์๋ container๊ฐ ๋ชฉ๋ก์์ ์๋ณด์ด๋ค์
docs๋ฅผ ๋ณด๋ 4.1์์๋ container๊ฐ ๋ชฉ๋ก์๋ ์๋ณด์ด๋๋ฐ, ์์ผ๋ก ์์ด์ง๋๊ฑด๊ฐ์?์ฝ๋์ ๋์์ ํ๋๋ฐ... ์ ์ต์ ๋ฒ์ docs์์ ๋น ์ง๊ฑด์ง ๊ถ๊ธํ๋ค์. ๋ฒ์ ์ ๋๋ฉด์ ๋ณ๊ฒฝ๋๊ฑฐ๋ง ๋ณด์ด๋๊ฑด๊ฐ์?
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssJmob
ใป
6๋ฌ ์
0
64
2
- ๋ฏธํด๊ฒฐ
quasar์ tailwind ์กฐํฉ์ ๊ดํ ์ง๋ฌธ
๊ฐ์ฌ๋!์ง๋ฌธ์ด ์์ต๋๋ค. ์ง๋ฌธ์ด ์ข ๊ธธ์ด์. ์ฃ์กํฉ๋๋ค.<span style
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssgaabi1204
ใป
7๋ฌ ์
0
89
1
- ๋ฏธํด๊ฒฐ
์ค์ต์ ์ฌ์ฉ๋๋ ์ด๋ฏธ์ง
์ค์ต์ ์ฌ์ฉ๋๋ ์ด๋ฏธ์ง๋ค ์ถ๋ ฅ์ด ์๋๊ณ ์์ต๋๋ค.(e.g. <a target="_blank" rel="noopener noreferrer nofollow" hre
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcss๋ฐฉํ์ปคํผ
ใป
8๋ฌ ์
0
84
2
- ๋ฏธํด๊ฒฐ
๋ชจ๋ฐ์ผ ์ฌ์ด์ฆ์ ๋ํด ์ง๋ฌธ์์ต๋๋ค.
์๋ ํ์ธ์ ํ ์ผ์๋ ๊ฐ์์์ ๋ฐ์ํ ๋ถ๋ถ์ ๊ฐ์๋ฅผ ๋ณด๋ค๊ฐ ๊ถ๊ธํ ์ ์ด ์๊ฒจ ์ฌ์ญค๋ณด๊ณ ์ถ์ด ๊ธ์ ๋จ๊น๋๋ค. ์๋ฅผ ๋ค์ด ๋ชจ๋ฐ์ผ ์ฒญ์ฒฉ์ฅ์ฒ๋ผ ๋ชจ๋ฐ์ผ์ฌ์ด์ฆ๋ง ์ฌ์ฉํ ๊ฒฝ์ฐ ๋ฆฌ์กํธ์์๋ ์ฒ์์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ชจ๋ฐ์ผ ์ฌ์ด
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcss๋ถ๋๋ฌ์ด ์กฑ์ ๋น
ใป
9๋ฌ ์
0
71
1
- ๋ฏธํด๊ฒฐ
nested ๋ฆฌ์คํธ์ผ๋ <ul> bullet ์คํ์ผ ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ
์๋ ํ์ธ์ ๊ฐ์ฌ๋typescript next ํ๊ฒฝ์์ ํฌํธํด๋ฆฌ์ค๋ฅผ ๋ง๋ค๊ณ ์๋๋ฐ์<img src="https://cdn.inflearn.com/public/files/posts/b36b8924-4804-4c47-b2b0-3b1c25c83088/
tailwindcsstypescriptcss๊ถ์
ใป
0
181
2
- ๋ฏธํด๊ฒฐ
via.placeholder.com ์ค๋ฅ
via.placeholder.com<s
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcss๊น๋ช ์
ใป
0
754
2
- ๋ฏธํด๊ฒฐ
๋น ํ๋ฉด์์ tail ๋ง ์ณค์๋ ํ์ ๋์๋ง ๋์ค๊ฒ ํ๋ ๋ฒ ์๋ ค์ฃผ์ธ์.
์ปฌ๋ฌ ๋ฐ ๋ฐฐ๊ฒฝ, ๋ณด๋ ์ฒ๋ฆฌ00:43<span style="color: rgb(0,
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssํ ์ดํฌ
ใป
0
107
2
- ๋ฏธํด๊ฒฐ
tailwind.config.js ํ์ผ์ ํตํด ๋คํฌ ๋ชจ๋ ์ค์ ์ ์ ์ฉ์ด ๋์ง ์์ต๋๋ค.
[tailwind.config.js]/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssDroid
ใป
0
260
1
- ๋ฏธํด๊ฒฐ
์๊ฐํ ์ด๋ฒคํธ
์๊ฐํ ์ ์๋๋ฐ ์ฟ ํฐ์ด ์๋ค์ด์์ ๋ฌธ์ ๋๋ ค์!
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssdlsdl9037
ใป
0
126
2
- ๋ฏธํด๊ฒฐ
font-weight๊ฐ ์ ์ ์ฉ์ด ์๋ ๊น์?
ํฐํธ ๋๊ป ์กฐ์ Lorem ipsum dolor sit amet.<
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcss์ค์ ๋น
ใป
0
369
3
- ๋ฏธํด๊ฒฐ
์ค๋ํซ ๊ด๋ จ์ง๋ฌธ
<img src="https://cdn.inflearn.com/public/files/posts/5a882bcf-5b9e-45d6-ace8-6973d8687531/6b5dce99-7385-4d29-a7bf-86a03d010542.png" media-type="img"
HTML/CSSjavascript๋ฐ์ํ-์นtailwindcssnonoa846
ใป
0
120
1






