1

This is the first time I'm working with tailwind css , after I did the required installations , and linked my styles.css file to the html file ,it only removed the default html but did not apply any stylings

Ukaoha Chizoba
  • 11
  • 2

2 Answers2

0

If you're sure you correctly followed the installation guide on tailwind docs and have the tailwind CSS IntelliSense vscode plugin installed, but still facing the same issue, try running this snippet code on your settings.json file on vscode.

"tailwindCSS.emmetCompletions": true,

"editor.inlineSuggest.enabled": true,

"editor.quickSuggestions": { "strings": true },

"css.validate": false,

The-True-Hooha
  • 41
  • 4
0

I've tried The-True-Hooha's answer above but it didn't work for me. However, what worked somehow was to follow this setup tutorial from their step 6. onwards. I noted these differences with the TailwindCSS official doc, that this tuto follows instead:

  • they create index.html in the dist folder alongside the output.css built by Tailwind instead of doing so in the src folder. index.html then becomes part of the same folder as output.css.
  • they change the content path accordingly: ['./dist/**/*.{html,js}'] in tailwind.config.js
  • In input.css, they formulate the directives as such:

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

instead of

@tailwindcss base;
@tailwindcss components;
@tailwindcss utilities;

If anyone knows the cause of this "hack" working instead of having index.html in the src folder, contrarily to following official doc, then I'd be happy to know.

Note: The author also finalises the tuto running a dev server to witness applied stylings in the browser, but I didn't even need to start a server to see my changes take place.

If you try this sample HTML:

<!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">
    <link  href="output.css" rel="stylesheet"/>
    <title>Tailwind Starter</title>
</head>
<body class="bg-gray-800">
    <div class="text-center text-white mt-12">
        <h1 class="text-4xl text-yellow-500 font-bold">Heap Heap Arrayy!</h1>
        <p class="text-xl  my-4"> I have created my first html project using tailwind. </p>
        <a  href="https://twitter.com/Khazifire"target="_blank" rel="noopener noreferrer">Created by Khazifire</a>
    </div>
</body>
</html>

it should render:

HTML sample preview

The snippet comes from this repo.

Hope it helps.

alicecommits
  • 1
  • 2