Django

This cheat sheet covers the simple basic stuff

Tailwind

Create a tailwind directory in the root of the project

Default config

1. npm init -y
2. npm install tailwindcss postcss-cli autoprefixer
3. npx tailwind init
4. create a postcss.config.js file Add the plugins you wanna use there:

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
    ]
}

5. Create your source folder src/tailwind.css Put this inside:

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

6. Go to package.json and create a script there:

"build": "postcss src/tailwind.css -o ../myapp/static/css/tailwind.css",
"watch": "postcss src/tailwind.css -o ../myapp/static/css/tailwind.css --watch",

7. npm run build
8. In tailwind.config.js

purge: {
    enabled: false,
    content: ['../myapp/templates/myapp/*.html']
  },

set enable to true when finished and do the final npm run build to clean the unused css

Custom styles

Go to src/tailwind.css and mix properties to have a reusable components between @tailwind components; and @tailwind utilities;

You can use the @apply like this:

.btn {
  @apply inline-block px-5 py-3 rounded-lg text-sm uppercase;
}
.btn:hover {
  @apply bg-indigo-400;
}

Or create brand new components inside tailwind.config.js

Example:

theme: {
   extend: {
    colors: {
      'brand-blue': '#199264',
    },
  },
}

Vue