farhad0085/Tailwind with Django.md

## Tailwind with Django.md

      
    Raw
  

              Tailwind with Django.md
            
          
    Setup TailwindCSS


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.
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ["./templates/**/*.{html,js}"], // add all html, js files from templates directory
    theme: {
        extend: {
            colors: {
                'ppm-blue-100': '#DDE8F5',
                'ppm-blue-200': '#abc5e5',
                'ppm-blue-300': '#739FD4',
                'ppm-blue-400': '#3d699e',
                'ppm-blue-500': '#3c5e87',
                'ppm-blue-600': '#345175',
                'ppm-blue-700': '#143359',
                'ppm-blue-800': '#03233e',
                'ppm-blue-900': '#031D33',
                'ppm-bg-dark': '#03233e',
                'ppm-bg-gray': '#c3c3c3',
                'ppm-bg-light': '#ffffff',
                'ppm-white': '#ffffff',
                'ppm-black': '#000000',
                'ppm-orange': '#FAB400',
                'ppm-orange-hover': '#FFBE19',
            },
        },
    },
    darkMode: "class",
    plugins: [],
}


Build output css file
npx tailwindcss -i ./static/css/base.css -o ./static/css/tailwindcss@3.4.1.css

In development environment, open another terminal and run following command to watch and compile tailwind.

npx tailwindcss -i ./static/css/base.css -o ./static/css/tailwindcss@3.4.1.css -w
or
yarn dev

Add dev command in your package.json

"scripts": {
  "dev": "npx tailwindcss -i ./static/css/base.css -o ./static/css/tailwindcss@3.4.1.css -w"
},

For production build, please use --minify flag to build minified css.

npx tailwindcss -i ./static/css/base.css -o ./static/css/tailwindcss@3.4.1.css --minify
or
yarn build

Add build command in your package.json

"scripts": {
  "build": "tailwindcss -i ./static/css/base.css -o ./static/css/tailwindcss@3.4.1.css --minify"
},


Add the output compiled CSS file to the <head> in base.html
<link href="{% static 'css/tailwindcss@3.4.1.css' %}" rel="stylesheet">
No results found