search

eggheadio-projects / build-user-interfaces-by-composing-css-utility-classes-with-tailwind

1 stars 4 forks source link

Build User Interfaces by Composing CSS Utility Classes with Tailwind #2

Closed zacjones93 closed 5 years ago

zacjones93 commented 5 years ago

Build User Interfaces by Composing CSS Utility Classes with Tailwind

Reported by user on slack: Not up to date(tailwind base, not tailwind preflight), some of the code on GitHub is not working as per the tutorial (card flex on large screens)

⏲️ 21 Minutes

🛠 Setup

📖 The Review

🏆 Finished

💻 Copying the JSON

lsminter commented 5 years ago

Lesson 9 isn't the same as what the instructor's video is. I've tried recreating it but whenever I add the @variants tag in the css file, it removed the styles that I applied to the text in my html file. So I believe its some issue with how I'm importing/using tailwindcss that isn't working.

index.html

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>09-tailwind-extending-tailwind-with-responsive-custom-utility-classes</title>
  <link rel="stylesheet" href="./src/styles.css">
</head>

<body class="font-sans leading-normal">

  <div class="bg-gradient-blue hover:bg-gradient-orange round-lg text-white p-4 mb-2">
    <h2>Gradients...</h2>
  </div>

  <div class="bg-gradient-orange hover:bg-gradient-blue rounded-lg text-white p-4 mb-2">
    <h2>...are back!</h2>
  </div>

</body>

</html>

src/styles.css

@tailwind preflight;
@tailwind utilities;

@variants hover {
  .bg-gradient-blue {
    background-color: #21d4fd;
    background-image: linear-gradient(19deg, #b721ff 0%, #21d4fd 100%);
  }

  .bg-gradient-orange {
    background-color: #ffe53b;
    background-image: linear-gradient(147deg, #ff2525 0%, #ffe53b 74%);
  }
}
zacjones93 commented 5 years ago

@lsminter have you checked the Tailwind changelog for deprecations around importing the package? https://tailwindcss.com/docs/release-notes

They've got an upgrade guide that is worth checking out: https://tailwindcss.com/docs/upgrading-to-v1

lsminter commented 5 years ago

Cayden had tailwind updated to version 0.7.4. That's what I'm trying to get working.

lsminter commented 5 years ago

I've tried updating/downgrading all of the dependencies. I've messed around with the gulp-cli. I've followed along with the tutorial on tailwindcss.com. I'm stuck.

lsminter commented 5 years ago

Turns out I was on the wrong repo. I was still on the instructor's repo. I swapped to cayden's but it turns out that the lesson still wasn't complete. I went ahead and added the code in src/styles.css to finish the lesson. It's been updated/implemented.