Using tailwindCss vs3.0 issue

I'm trying to learn tailwindCss but the documentation shows the latest version

    https://tailwindcss.com/docs/installation

which I followed to set up my first project, but the issue here is when I apply the utility class to my project it's not working. Here is my code

    <body>
     <h1 class="text-lime-400">Hello World of Joy </h1>
     <hr>
    </body>

here is the link to the generated styles by tailwindcss

    <link rel="stylesheet" href="/public/styles.css">

Solution

Assalamu'Alaikum. Thank you for your question. As you are beginning with tailwind I suggest you to use CDN first. In Installation you will find Play CDN where you will copy only

<script src="https://cdn.tailwindcss.com"></script>

and paste in your head section of HTML. after that all tailwind css code will run.

But if you wish to use it by installing then i suppose you got a package.json file. where you should write a script to build your css. and you need to build css. if you change anything in tailwind.config.js then you will need to rebuild the css again to effect the changed variants.

{
  "name": "dims-web-1.1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build-css": "tailwindcss build src/style.css -o public/styles.css"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^2.2.19"
  }
}

here in scripts "build-css" is my custom code to build css. to build the css. in terminal you need to write

npm run build-css

and hit enter to get your css in your public.css then tailwind utility classes will work fine.

Thank You