Source code for the "Designing with Tailwind CSS" course.

  • By Tailwind Labs
  • Last update: Dec 8, 2022
  • Comments: 11

Comments(11)

  • 1

    md:hover:bg-green-400 without effect

    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: []
};
  • 2

    a way to reference breakpoint for conditional rendering

    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

  • 3

    Can see anything / Structuring a Basic Card

    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.

    Screen Shot 2020-03-01 at 11 18 58 PM

  • 4

    Clicking that backdrop button for closing the dropdown menu resets the page scroll position!

    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!

  • 5

    Bump eslint-utils from 1.3.1 to 1.4.2 in /01-getting-up-and-running/08-optimizing-for-production

    Bumps eslint-utils from 1.3.1 to 1.4.2.

    Commits
    • 4e1bc07 1.4.2
    • e4cb014 🐛 add null test
    • 230a4e2 1.4.1
    • 08158db 🐛 fix getStaticValue security issue
    • 587cca2 🐛 fix getStringIfConstant to handle literals correctly
    • c119e83 🐛 fix getStaticValue to handle bigint correctly
    • 531b16f 🔖 1.4.0
    • 276303d ⚒ upgrade rollup
    • cb518c7 🐛 fix hasSideEffect false negative
    • aac472e 🐛 fix isParenthesized had false positive on ImportExpression (fixes #1)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 6

    Bump eslint-utils from 1.3.1 to 1.4.2 in /01-getting-up-and-running/06-extracting-reusable-components

    Bumps eslint-utils from 1.3.1 to 1.4.2.

    Commits
    • 4e1bc07 1.4.2
    • e4cb014 🐛 add null test
    • 230a4e2 1.4.1
    • 08158db 🐛 fix getStaticValue security issue
    • 587cca2 🐛 fix getStringIfConstant to handle literals correctly
    • c119e83 🐛 fix getStaticValue to handle bigint correctly
    • 531b16f 🔖 1.4.0
    • 276303d ⚒ upgrade rollup
    • cb518c7 🐛 fix hasSideEffect false negative
    • aac472e 🐛 fix isParenthesized had false positive on ImportExpression (fixes #1)
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 7

    Bump lodash from 4.17.11 to 4.17.15 in /01-getting-up-and-running/01-setting-up-tailwind-and-postcss

    Bumps lodash from 4.17.11 to 4.17.15.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot ignore this [patch|minor|major] version will close this PR and stop Dependabot creating any more for this minor/major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

  • 8

    Minify CSS issue

    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.

  • 9

    Status of the upcoming lessons

    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 :smile:

  • 10

    @apply not taking multiple values in a line

    @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

  • 11

    Need v-bind:key now for v-for

    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

Popular Tag

Related