inflearn logo
็Ÿฅ่ญ˜ๅ…ฑๆœ‰
inflearn logo

Tailwind CSS ใงไฝœใ‚‹็ด ๆ•ตใช Web UI ใ‚นใ‚ฟใ‚คใƒซใƒชใƒณใ‚ฐ

[Tailwind CSSใงไฝœใ‚‹็ด ๆ•ตใชใ‚ฆใ‚งใƒ–UIใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐ]ใฎ่ฌ›็พฉใฏใ€็พๅœจๆœ€ใ‚‚ใƒ›ใƒƒใƒˆใชใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ‚ใ‚‹Tailwind CSS v3.4.1ใ‚’ใ€็†่ซ–ใ‹ใ‚‰ๅฎŸๆˆฆ็š„ใชใƒฌใ‚นใƒใƒณใ‚ทใƒ–ใชใ‚ฆใ‚งใƒ–ใ‚ตใ‚คใƒˆใพใงใ€19ๆ™‚้–“ใซใ‚ใŸใฃใฆๅฟ ๅฎŸใซๆ‰ฑใฃใฆใ„ใพใ™ใ€‚่ฌ›็พฉๆ™‚้–“ใŒ้•ทใ„ใ‹ใ‚‰ใจใ„ใฃใฆ่‰ฏใ„่ฌ›็พฉใงใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ใ—ใ‹ใ—ใ€ใ“ใฎ่ฌ›็พฉใฏๆ™‚้–“ใฎ้•ทใ•ใ ใ‘ใงใชใใ€่‰ฏใ„่ฌ›็พฉใงใ‚ใ‚‹ใจ่‡ช่ฒ ใ—ใฆใ„ใพใ™ใ€‚็‰นใซใ€Tailwind CSSใฎใ™ในใฆใฎ็†่ซ–ใ‚’8ๆ™‚้–“30ๅˆ†ใ‹ใ‘ใฆ่ฉณ็ดฐใซๆ‰ฑใฃใฆใ„ใ‚‹ใฎใงใ€CSSใฎ็†่ซ–ใŒไธ่ถณใ—ใฆใ„ใ‚‹ไบบใงใ‚‚ใ€CSSใฎ็†่ซ–ใ‚’ๅฟ ๅฎŸใซๅญฆใถใ“ใจใŒใงใใพใ™ใ€‚ใ“ใฎ่ฌ›็พฉใฏใ€้–‹็™บ่€…ใจใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผใŒไฝœใ‚‹Tailwind CSSใฎใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐใ‚’ไธญๅฟƒใซไฝœๆˆใ•ใ‚Œใฆใ„ใพใ™ใ€‚

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

TailwindCSS
TailwindCSS
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS
TailwindCSS
TailwindCSS
Responsive Web
Responsive Web
HTML/CSS
HTML/CSS

ใŠ็Ÿฅใ‚‰ใ›

5 ไปถ

  • codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    tw-v4.jpg

    ใ“ใ‚“ใซใกใฏใ€‚ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใงใ™ใ€‚

    Tailwind CSS v4.0ใงๆญฃๅผใƒชใƒชใƒผใ‚นใ•ใ‚Œใพใ—ใŸใ€‚

    Tailwind CSS v4.0ใซ้–ข้€ฃใ™ใ‚‹2ใคใฎใƒ“ใƒ‡ใ‚ชใŒๆ›ดๆ–ฐใ•ใ‚Œใ€PDFๆ•™ๆใƒ•ใ‚กใ‚คใƒซใ‚‚ๆ›ดๆ–ฐใ•ใ‚Œใพใ—ใŸใ€‚

    ใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆๆ˜ ๅƒใจPDFๆ•™ๆใƒ•ใ‚กใ‚คใƒซใ‚’ใ”็ขบ่ชใใ ใ•ใ„ใ€‚

    โ–ผๆ˜ ๅƒใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆไธ€่ฆง

    • [ใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆ] Tailwind CSS v4.0 CLIใฎใ‚คใƒณใ‚นใƒˆใƒผใƒซใจ็’ฐๅขƒ่จญๅฎš

    • [ใ‚ขใƒƒใƒ—ใƒ‡ใƒผใƒˆ] Tailwind CSS v4.0ใ‚ซใ‚นใ‚ฟใƒ ใƒ†ใƒผใƒž็’ฐๅขƒ่จญๅฎš

    0
  • codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    [่ฌ›็พฉใ‚ชใƒผใƒ—ใƒณ]ใƒขใƒใ‚คใƒซWebใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช with CSS Nesting

    19ใƒšใƒผใ‚ธใ€ๅˆ่จˆ22็จฎ้กžใฎใƒขใƒใ‚คใƒซใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ๅˆถไฝœใ—ใชใŒใ‚‰ใ€ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผๅฐฑ่ทใจใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผๅฎŸๅ‹™ใงๆœ€ใ‚‚็ซถไบ‰ๅŠ›ใฎใ‚ใ‚‹ใƒขใƒใ‚คใƒซWebๅˆถไฝœ่ƒฝๅŠ›ใ‚’ๅ‘ไธŠใ•ใ›ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚ใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผใจใ—ใฆใ€ใƒขใƒใ‚คใƒซใ‚ฆใ‚งใƒ–ใ‚’ๅˆถไฝœใ™ใ‚‹ใŸใ‚ใฎใปใจใ‚“ใฉใ™ในใฆใฎๅˆถไฝœๆ–นๆณ•ใจใƒŽใ‚ฆใƒใ‚ฆใ‚’ๅ ช่ƒฝใงใใพใ™ใ€‚

    ใƒขใƒใ‚คใƒซWebใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใ‚ฏใƒฉใ‚นใงๆœ€ใ‚‚ๅผทใฟใฎใ‚ใ‚‹้ƒจๅˆ†ใงใ‚ใ‚‹HTMLใƒฏใ‚คใƒคใƒ•ใƒฌใƒผใƒ ใฎ่ฉณ็ดฐใชๆ›ธใๆ–นใ‚’ใ™ในใฆใฎใƒšใƒผใ‚ธไธ€ใคไธ€ใค่ฉณ็ดฐใซ่ชฌๆ˜Žใ—ใพใ™ใ€‚่ฌ›็พฉใซใ‚ˆใ‚Šใ€HTMLใƒฏใ‚คใƒคใƒ•ใƒฌใƒผใƒ ใฎๅˆถไฝœ่ƒฝๅŠ›ใŒๅคงๅน…ใซๅ‘ไธŠใ—ใพใ™ใ€‚็‰นใซCSSใƒใ‚นใƒˆๆ–นๆณ•ใ‚’ๅๅˆ†ใซๅญฆใถใ“ใจใŒใงใใพใ™ใ€‚ Flexใƒฌใ‚คใ‚ขใ‚ฆใƒˆใ‚’ไธญๅฟƒใซไธญไธŠ็ดšCSSๅฎŸๆˆฆ่ƒฝๅŠ›ใ‚’ๅ……ๅˆ†ๅ‚™ใˆใฆใ„ใพใ™ใ€‚

    โœ…่ฌ›็พฉ็ดนไป‹ใ‚ทใƒงใƒผใƒˆใ‚ซใƒƒใƒˆ๏ผšhttps: //inf.run/yfNHF

    css-nesting-content-01.png

    0
  • codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    CodingWorks-Main-Cover

    Tailwind CSSๆœฌ็•ชใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใ‚ชใƒผใƒ—ใƒณ

    ๅฎŸๆˆฆไพ‹ๅˆถไฝœใ ใ‘ใงTailwind CSSๅฎŸๅ‹™่ƒฝๅŠ›ๅ‘ไธŠ๏ผ

    Tailwind CSSใ‚’ๆดป็”จใ—ใฆ26็จฎ้กžไปฅไธŠใฎๅฎŸ่ทตไพ‹ใ‚’่ฃฝไฝœใ™ใ‚‹้Ž็จ‹ใงใ™ใ€‚ๅฎŸ่ทตไพ‹ใ‚’็ด ๆ—ฉใๅคšๆง˜ใซๅˆถไฝœใ™ใ‚‹ใ“ใจใงใ€ใใฎไธญใงๅฟ…้ ˆใฎ็†่ซ–ใ‚’่ชฌๆ˜Žใ—ใพใ™ใ€‚ใ“ใฎ่ฌ›็พฉใฏใ€้–‹็™บ่€…ใจใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผใŒไฝœๆˆใ™ใ‚‹Tailwind CSSใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐใ‚’ไธญๅฟƒใซไฝœๆˆใ•ใ‚Œใพใ—ใŸใ€‚

    Webใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฅใจ้–‹็™บ่€…ใซใจใฃใฆใ€ๅฐฑ่ทใจ่ปข่ทใฎใŸใ‚ใซๅคงใใชๅŠฉใ‘ใซใชใ‚‹ใจๆ€ใ„ใพใ™ใ€‚

    tailwind-logo

     

    โค่ฌ›็พฉ็ดนไป‹ใ‚’่ฆ‹ใซ่กŒใ๏ผš https ://inf.run/tHwCD

    0
  • codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ€‚ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใงใ™ใ€‚

    ไปŠๅ›žใ€ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใŒHTML+CSS+JSใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชๅฎŸๆˆฆใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐ๏ผˆใ‚ทใƒผใ‚บใƒณ3๏ผ‰่ฌ›็พฉใŒใ‚ชใƒผใƒ—ใƒณใ—ใพใ—ใŸใ€‚

    HTML+CSS+JS ๅฎŸ็ธพใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ช ใ‚ทใƒผใ‚บใƒณ3ใฏใ€ไธญไธŠ็ดšใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใฎใŸใ‚ใฎใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐๆœ€ๆ–ฐ็†่ซ–ไพ‹30ๅ€‹ใจ45็จฎ้กžไปฅไธŠใฎๆง˜ใ€…ใช็จฎ้กžใฎๅฎŸๆˆฆไพ‹ๅˆถไฝœ้Ž็จ‹ใงๆง‹ๆˆใ•ใ‚Œใฆใ„ใพใ™ใ€‚ๅˆ่จˆ29ๆ™‚้–“็จ‹ๅบฆใฎ่ฌ›็พฉๆ™‚้–“ใจๅŒใ˜ใใ‚‰ใ„ๅฟ ๅฎŸใชๅ†…ๅฎนใจไฝ“็ณป็š„ใช็†่งฃใ‚’ๅŠฉใ‘ใ‚‹่ชฌๆ˜Žใงๅˆถไฝœใ•ใ‚ŒใŸใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชๅฎŸๆˆฆๅˆถไฝœๆ˜ ๅƒใ‚’ๅญฆ็ฟ’ใงใใ‚‹ใ‚ˆใ†ใซใชใ‚Šใพใ™ใ€‚

    ๐ŸšฉHTML +CSS+JSใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชๆœฌ็•ชใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐ๏ผˆใ‚ทใƒผใ‚บใƒณ3๏ผ‰่ฌ›็พฉ็ดนไป‹ใ‚’่ฆ‹ใ‚‹๏ผšhttps: //inf.run/WwtUv

    season3-cover.png

     

    0
  • codingworks๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ใ“ใ‚“ใซใกใฏใ€‚ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใงใ™ใ€‚

    ไปŠๅ›žใ€ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใŒๅฟƒ่ก€ใ‚’ๅ‚พใ‘ใฆไฝœใฃใŸTailwind CSS่ฌ›็พฉใŒใ‚ชใƒผใƒ—ใƒณใ—ใพใ—ใŸใ€‚
    ใ‚ณใƒผใƒ‡ใ‚ฃใƒณใ‚ฐใƒฏใƒผใ‚ฏใ‚นใŒไฝœๆˆใ—ใŸTailwind CSSใƒฌใƒƒใ‚นใƒณใฏใ€ใ€ŒTailwind CSSใง้–‹็™บ่€…ใŒไฝœใ‚‹ใ‚ฏใƒผใƒซใชUIใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐใ€ใจใ„ใ†ใ‚ฟใ‚คใƒˆใƒซใงไฝœๆˆใ—ใŸใ‚ˆใ†ใซใ€้–‹็™บ่€…ใŒใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒณใ‚ฐใ‚’ใ™ใ‚‹ใจใใซใƒ‘ใƒ–ใƒชใƒƒใ‚ทใƒฃใƒผใซๅŠฃใ‚‰ใšใใ‚Œใ„ใชUIใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐใŒใงใใ‚‹้ƒจๅˆ†ใซๆœ€ใ‚‚็„ฆ็‚นใ‚’ๅฝ“ใฆใพใ—ใŸใ€‚

    [Tailwind CSSใง้–‹็™บ่€…ใŒไฝœใ‚‹ใ‚ฏใƒผใƒซใชUIใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐ]่ฌ›็พฉใฏ็พๅœจใ€ๆœ€ใ‚‚ใƒ›ใƒƒใƒˆใชใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ‚ใ‚‹Tailwind CSSใ‚’็†่ซ–ใ‹ใ‚‰ๆœฌ็•ชๅๅฟœๅž‹ใ‚ฆใ‚งใƒ–ใ‚ตใ‚คใƒˆใพใง19ๆ™‚้–“ไปฅไธŠใฎๆŽˆๆฅญๆ™‚้–“ใงๅฟ ๅฎŸใซๆ‰ฑใฃใฆใ„ใพใ™ใ€‚ใ—ใ‹ใ—ใ€ใใฎ่ฌ›็พฉใฏๆ™‚้–“ใ‚‚้•ทใใ€่ฌ›็พฉใ‚‚่‰ฏใ„ใจ่‡ช่ฒ ใ—ใพใ™ใ€‚ 30ๅˆ†้–“ใฎ่ฉณ็ดฐใชๅ–ใ‚Šๆ‰ฑใ„ใซใ‚ˆใ‚Šใ€CSS็†่ซ–ใŒไธ่ถณใ—ใฆใ„ใ‚‹ไบบใซCSS็†่ซ–ใ‚’ๅฟ ๅฎŸใซๅญฆ็ฟ’ใ™ใ‚‹ใ“ใจใŒใงใใพใ™ใ€‚

    image Tailwind CSSใฏCSS Frameworks Rankingใง็พๅœจใพใง็€ๅฎŸใซไบบๆฐ—ใ‚’ไบซๅ—ใ—ใฆใŠใ‚Šใ€ๆบ€่ถณๅบฆ1ไฝใ‚’ใ—ใฆใ„ใ‚‹Tailwind CSSใฏๆœ€่ฟ‘ไธ–็•Œใงๆœ€ใ‚‚ใƒ›ใƒƒใƒˆใชCSSใƒ•ใƒฌใƒผใƒ ใƒฏใƒผใ‚ฏใงใ™ใ€‚ใƒ›ใƒƒใƒˆใช็†็”ฑใฎไธญใงๆœ€ใ‚‚ไปฃ่กจ็š„ใชใฎใŒใพใ•ใซใƒฆใƒผใƒ†ใ‚ฃใƒชใƒ†ใ‚ฃใ‚ฏใƒฉใ‚นใ‚’ไฝฟใฃใŸๅ‰ต้€ ็š„ใชใ‚นใ‚ฟใ‚คใƒชใƒณใ‚ฐใŒใงใใ€ใพใŸใ€่‰ฏใ„ใ‚ฏใ‚ชใƒชใƒ†ใ‚ฃใฎใƒ‡ใ‚ถใ‚คใƒณใ‚’ไฝœใ‚‹ใŸใ‚ใฎไฝœๆฅญๆ™‚้–“ใŒใ‹ใชใ‚Šๆ—ฉใ„ใจใ„ใ†็‚นใ ใจ่€ƒใˆใ‚‰ใ‚Œใพใ™ใ€‚

    ็†่ซ–ใฎๆŽˆๆฅญใ ใ‘ใงใชใใ€Tailwind CSSใงไฝœใ‚‹ๅฎŸ่ทตไพ‹ใ‚„้–‹็™บ่€…ใฎใ‚ญใƒฃใƒชใ‚ขๅฑฅๆญดๆ›ธ๏ผ†ใƒใƒผใƒˆใƒ•ใ‚ฉใƒชใ‚ชใฎ็ดนไป‹

    โœ…่ฌ›็พฉ็ดนไป‹ใจ็„กๆ–™่ฌ›็พฉ่ฆ‹ใซ่กŒใ๏ผš https ://inf.run/pjqKk


    image

    0

๏ฟฅ9,654