Tailwind CSS로 카드 만들기

Tailwind CSS가 포함된 카드 구성요소

안녕하세요 여러분! 이 게시물에서는 Tailwind CSS로 카드를 만드는 방법을 알아봅니다.

저와 함께 테일윈드 css 및 코드를 설정하려면 이것을 참조할 수 있습니다(저는 동영상을 만드는 데 능숙하지 않습니다)

코딩을 시작하기 전에 우리는 무엇을 만들어야 하고 완료되었을 때 어떻게 보일지에 대한 아이디어가 있어야 합니다. 따라서 기본적으로 카드에는 이미지, 제목, 일부 설명 및 버튼이 있습니다.

따라서 먼저 카드를 구성하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind Card Tutorial</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <!-- <h1>Tailwind Css Card Tutorial </h1> -->
    <div>
        <div>
            <img src="https://images.unsplash.com/photo-1658827866369-25c66ae3dc30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" alt="image">

            <h2>Tailwind Card Comoponent</h2>
            <p>
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero dolore quod placeat sit? Omnis nobis perferendis doloremque facilis, modi animi tempora inventore! 
            </p>
            <button>Read More</button>
        </div>
    </div>
</body>
</html>

카드 구성 요소의 HTML 부분을 완성했습니다.

**프로젝트에 순풍 css를 설정하는 방법을 알고 있다면 이 부분을 건너뛸 수 있습니다.

이제 프로젝트에 Tailwind CSS를 설정해야 합니다. 따라서 VS Code에서 터미널을 열고 다음 명령을 실행합니다(공식Tailwind Website에서 모든 명령을 찾을 수 있음).

단말기

npm init -y
npm install -D tailwindcss postcss autoprefixer vite
npx tailwindcss init

tailwindcss.config.js

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

style.css

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

package.json에 위의 스크립트를 추가합니다.

더 좋고 빠른 경험을 위해 Tailwind CSS IntelliSense 확장 프로그램을 설치하세요.

이 프로젝트의 전체 코드

<div class="conatainer bg-slate-400 w-screen h-screen flex justify-center items-center">
        <div class="max-w-sm h-auto bg-white rounded-xl shadow-2xl">
            <img src="https://images.unsplash.com/photo-1658827866369-25c66ae3dc30?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80" class="w-full rounded-t-xl" alt="image">

            <h2 class="font-bold text-lg my-2 mx-4 hover:cursor-default">Tailwind Card Comoponent</h2>
            <p class="font-medium text-sm my-4 mx-4 hover:cursor-default">
                Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero dolore quod placeat sit? Omnis nobis perferendis doloremque facilis, modi animi tempora inventore! 
            </p>
            <button class="bg-blue-600 text-white font-bold px-4 py-1 mx-4 rounded-md my-2 hover:bg-blue-700 hover:scale-105 duration-300 mb-8">Read More</button>
        </div>
    </div>

당신이 그것을 사랑 바랍니다.😊

Reference

이 문제에 관하여(Tailwind CSS로 카드 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/devrohit0/create-a-card-with-tailwind-css-20eh

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

Tailwind CSS로 카드 만들기

Reference

좋은 웹페이지 즐겨찾기