tailwindlabs / designing-with-tailwindcss Goto Github PK

It's not clear in the video, because there's nothing in the page body, but if the page content is scrolled down from the top, clicking the background overlay button for closing the dropdown menu resets the scroll position.

Why is this and what's the best way to fix it?

Thanks!

What about closing dropdown when clicking elsewhere? That's default behavior of all dropdowns.

Hi,

I followed all 8 videos of '01-getting-up-and-running'.

In the 8th video, I ran the example to 'purgecss' and I can see the css is much smaller like 2kb. All good.

Issue

Now if I modify anything in my index.html the build cannot find CSS elements anymore. Here is my repo .

Error

➜  01-getting-up-and-running git:(edge) ✗ npm run build

> [email protected] build /Users/andy_lap/Documents/github/pascalandy/tw-demo/01-getting-up-and-running
> postcss css/tailwind.css -o public/build/tailwind.css

CssSyntaxError: /Users/andy_lap/Documents/github/pascalandy/tw-demo/01-getting-up-and-running/css/tailwind.css:4:5: `@apply` cannot be used with `.px-5` because `.px-5` either cannot be found, or its actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that `.px-5` exists, make sure that any `@import` statements are being properly processed *before* Tailwind CSS sees your CSS, as `@apply` can only be used for classes in the same CSS tree.

  2 | @tailwind components;
  3 | .btn {
> 4 |     @apply px-5 py-7 inline-block rounded-lg shadow-lg bg-indigo-500 text-sm text-white uppercase tracking-wider font-semibold;
    |     ^
  5 | }

Thank you!

Where is the tailwind-full-config.js mentioned in the video?

I got a linting error I think from the Vetur extension on Line 29 in App.vue in vscode
<div class="mt-6 w-full px-4 lg:w-1/2 xl:w-1/3" v-for="destination in popularDestinations">

needs to become something like
<div class="mt-6 w-full px-4 lg:w-1/2 xl:w-1/3" v-for="destination in popularDestinations" v-bind:key="destination">

or it throws a v-bind:key error for me

Not sure if this is a bug or intended from linting, but since vscode advises installing Vetur when it sees a .vue extension, others may have the same problem

Thanks

Hello team,
You might have encountered this earlier but I don't see any update regarding the unfinished lessons listed in the documentation site.

These lessons were very helpful to me and I am sure to many other folks while getting started. I would love if you could take some time to complete the pending ones.

Thanks 😄

What's is the proper way to start the dev server in this setup? The demo starts a bit too quicky.

I'm trying the reproduce this step and I can't. So far I did 'npm run serve' but nothing shows up. Here is my repo.

Hi, first of all thanks for the tutorial.

I'm having a problem with the dropdown backdrop.
If I have two dropdowns (one text, one from image as in your tutorial) the backdrop of the text dropdown is allowing that I can click the image.

As you can see in the screenshot I clicked on "Configuration". I can select the other dropdown wich will be causing the problem of 2 dropdowns being displayed.

In fact.. al images will be displayed in front of it:

I'm having the exact same code but other colors.

<button className="fixed inset-0 h-full w-full cursor-default focus:outline-none bg-black opacity-75" tabIndex="-1" ></button>

hi, it looks that the link for sizzy browser extention for vsCode is broken plz send to me a valid link

I learn the tailwindcss by the Hover, Focus, and Active Styles video
on my computer, I use chrome 76.0.3809.100 (64 bit)
my package.json

{
  "name": "tailwindmy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "postcss css/tailwind.css -o public/build/tailwind.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "autoprefixer": "^9.6.1",
    "postcss-cli": "^6.1.3",
    "tailwindcss": "^1.1.0"
  }
}

when I click the link in md, the background turn green ,but when I move the mouse over the link, the background don't change

<!DOCTYPE html>
<html lang="en">

<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">
  <link rel="stylesheet" href="build/tailwind.css">
  <title>tailwindcss</title>
</head>

<body class="bg-gray-300 ">
  <div class="bg-gray-100 flex">
    <div class="px-8 py-12 max-w-md mx-auto sm:max-w-xl lg:max-w-full lg:w-1/2 lg:py-24 lg:px-12">
      <div class="xl:max-w-lg xl:ml-auto">
        <img class="h-10" src="img/logo.svg" alt="Workcation">
        <img class="mt-6 rounded-lg sm:mt-8 sm:h-64 sm:w-full sm:object-cover sm:object-center lg:hidden shadow-2x"
          src="img/beach-work.jpg" alt="woman workcationing on the beach">
        <h1 class="mt-6 text-2xl font-hairline leading-tight sm:mt-8 sm:text-4xl lg:text-3xl">
          You can work from anywhere.
          <br class="hidden lg:inline">
          <span class="text-indigo-500">
            Take advantage of it.
          </span>
        </h1>
        <p class="mt-2 text-gray-700 sm:mt-4 sm:text-xl">
          Workcatin helps you find work-friendly rentails in beautiful locaions
          so you can enjoy some nice weather even when you're not on vacation.
        </p>
        <div class="mt-4 sm:mt-6">
          <a href="#" class="inline-block px-5 py-3 rounded-lg shadow-lg bg-indigo-500 md:hover:bg-green-400 hover:bg-indigo-400 active:bg-indigo-600 focus:outline-none focus:shadow-outline text-sm text-white uppercase tracking-wider font-semibold sm:text-base">Book your escape</a>

        </div>
      </div>
    </div>
    <div class="hidden lg:block lg:w-1/2 lg:relative">
      <img class="absolute inset-0 h-full w-full object-cover object-center" src="img/beach-work.jpg"
        alt="Woman workcationing on the beach">
    </div>
  </div>
</body>

</html>

my config file

module.exports = {
  theme: {
    extend: {}
  },
  variants: {
    backgroundColor: ['responsive', 'hover', 'focus', 'active']
  },
  plugins: []
};

I cannot find a way to sort of somehow can figure out the viewport screen size to manipulate with.
What I want is like in vuetify and material UI they come with breakpoint context so you can either choose to render the element or not. Right now the responsive utility class only set their display style to either hidden or block

@apply inline-block px-5 py-3 rounded-lg text-sm uppercase tracking-wider font-semibold;

error:
{
"resource": "/home/sachin/Documents/Study/html/tailwindproject/css/tailwind.css",
"owner": "generated_diagnostic_collection_name#1",
"code": "css-semicolonexpected",
"severity": 8,
"message": "semi-colon expected",
"source": "css",
"startLineNumber": 5,
"startColumn": 23,
"endLineNumber": 5,
"endColumn": 27
}
semi-colon expected

But when i write mutiple @apply it works like in
.btn{
@apply some class
@apply some class
}
like this it works

In the video I see that you have a minified CSS file and it seems it is created every time you build it with postcss. In the beginning of the video series the css files have many comments and white spaces (like mine). I am unable to find how to get this minified CSS file ANYWHERE on the internet and I did not hear you talk about it either. How do I do this, since my CSS files are almost 2MB! I am designing in Craft CMS which is in dev mode (set in .env file) but I don't think that influences it.