How to install Tailwind CSS in html correctly?-CodePudding

I just want to know that how to install Tailwind CSS properly all I want the steps 1 by 1 because I have tried to do so but it doesn't work properly

I have tried to copy the steps from the main website of twilwind.com but I don't get the right installation I don't know why somehow

CodePudding user response：

Here is the official documentation where I'm answering from

Here are the steps:\

intialise your html files global css files.
using your command line go to the exact folder then run the following:
npm install -D tailwindcss;npx tailwindcss init
once the configuration file is created copy the following inside of it:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Now that you have a configuration file, you need to copy past the following inside your global css file:

@tailwind base;
@tailwind components;
@tailwind utilities;

then run the following command so your talwind cli compiles your css for you:
npx tailwindcss -i global.css -o new_css_file.css --watch
Options explanation:
-i flag to specify the input file
-o to specify output
--watch to keep watching changes(on your html file) and compiling to global.css file

CodePudding user response：

Assuming you don't have node.js and npm installed I will give you the cdn approch.

Here is the official documentation link This is where I answered from

Add this below script inside your head tag

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

And you should be able to play with tailwind in built classes

if you want to customize tailwind configuration add another script tag below the previous one ex:

<script src="https://cdn.tailwindcss.com"></script>    
 <script>
        tailwind.config = {
          theme: {
            extend: {
              colors: {
                clifford: '#da373d',
              }
            }
          }
        }
 </script>

CodePudding user response：

Add this code on <head> and in html you must add the <script>

<head>
     <script src="https://cdn.tailwindcss.com"></script>
</head>
     <script>
        tailwind.config = {
          theme: {
            extend: {
              colors: {
                clifford: '#da373d',
              }
            }
          }
        }
      </script>