Tailwind CSS로 카드 만들기

6629 단어 beginnershtmltailwindcsswebdev
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>


당신이 그것을 사랑 바랍니다.😊
Spring Boot 자습서 작업 일정
구인 공고 웹 사이트: 게시물 항목 읽기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage