Tailwindcss common commands and colors

The working method with include script

When config or template is updated and you don't see changes apply. 

Then you have to rebuild css with changes and then rebuild include. 

npx tailwindcss -i static/input.css -o static/output.css --watch

python3 include.py

 

Step by step method from scratch.

Install Tailwind CSS

Install tailwindcss via npm, and create your tailwind.config.js file.

 

npm install -D tailwindcss 

npx tailwindcss init

Add the paths to all of your template files in your tailwind.config.js file.

 

vim tailwind.config.js

 

const colors = require('tailwindcss/colors')

module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {
            colors: {
                'warm-gray': colors.warmGray,
                blue: colors.blue,
                yellow: colors.yellow,
                amber: colors.amber,
            },
        },
  },
  plugins: [
        require('@tailwindcss/forms'),
        require('@tailwindcss/typography'),

    ],
}

 

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to your main CSS file.

 

vim static/input.css

 

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


.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

[x-cloak] { display: none !important; }

 

 

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

 

 npx tailwindcss -i static/input.css -o static/output.css --watch

 

if 

 

Error: Cannot find module '@tailwindcss/typography'

 

then you have to install it.. 

 

npm install -D '@tailwindcss/typography'