Конфигурация tailwindcss с помощью django

Я не могу понять, как настроить tailwindcss с django. Возможно, я просто неправильно делаю со стороны tailwind, но я знаю, что правильно настроил статические файлы django. Я просмотрел все видео, которые смог найти, но ни одно из них не затрагивает мою конкретную проблему. Объяснение того, как работает конфигурация tailwind на низком уровне, также было бы полезно, чтобы я мог сам диагностировать проблему. спасибо. сообщение об ошибке структура файла и файл конфига

Конфигурация tailwind css в django:

Для этого нам нужно создать файл внутри static с именем jstools и перейти в эту папку и внутрь jstools с помощью команды в терминале.

cd jstools

После этого нам нужно выполнить несколько команд для добавления tailwind CSS.

npm init -y

После этого выполните вторую команду.

npm install tailwindcss autoprefixer clean-css-cli

следующий шаг: выполнить следующую команду

npx tailwindcss init -p

После этой команды вы можете увидеть некоторые JSON и js файлы внутри инструмента js.

Теперь перейдите в package.json и замените код внутри данных на следующий

code.
"build": "tailwind build ../static/css/tailwind.css -o ../static/css/style.css && cleancss -o ../static/css/style.min.css ../static/css/style.css"

После этого перейдите внутрь файла tailwind.config.js.

И измените экспорт модуля следующим образом:

future: {
        removeDeprecatedGapUtilities: true,
        purgeLayersByDefault: true,
    },
    purge: {
        enabled: false, //true for production build
        content: ['../**/templates/*.html', '../**/templates/**/*.html']
    },
    theme: {
        extend: {},
    },
    variants: {},
    plugins: [],

Теперь перейдите в папку CSS в static и создайте новый файл с именем tailwind.css.

И внутри tailwind.css напишите этот код:

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

Теперь нам нужно зайти в jstools с помощью терминала и выполнить эту команду в терминале:

-npm run build

Теперь нам остается только загрузить статику внутрь HTML-страницы.

И мы готовы к запуску tailwind CSS.

Я покажу, как это реализовано у меня и работает с оптимизацией. Создайте frontend dir в корневом каталоге проекта:

├── backend
│   ├── backend
│   │   ├── asgi.py
│   │   ├── __init__.py
│   │   ├── settings.py
│   │   ├── urls.py
│   │   └── wsgi.py
│   └── manage.py
├── frontend
└── venv

установите tailwind (см. документацию)

cd frontend
npm install -D tailwindcss postcss postcss-cli autoprefixer cssnano

настроить попутный ветер:

package.json

"scripts": {
    "build": "postcss app/css/main.css -o app/css/main.min.css"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "postcss": "^8.4.16",
    "postcss-cli": "^10.0.0",
    "tailwindcss": "^3.1.8"
  }
}

create postcss.config.js:

module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
      cssnano:{     # optimizes for production
          preset: 'default'
      },
    }
  }

create tailwind.config.js:

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

создайте папку css:

mkdir app
cd app
mkdir css
cd css

Внутри папки css создайте main.css и перепишите в:

main.css

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

Теперь вернемся назад и запустим скрипт:

cd ../../
npm run bild

Это создаст минифицированный css файл в папке css (main.min.css)

И настройте settings.py: 

CORE_DIR = Path(__file__).resolve().parent.parent.parent
FRONT_DIR = CORE_DIR / 'frontend'

STATICFILES_DIRS = FRONT_DIR / 'app/'

Теперь для вызова статического использования в вашем шаблоне: base.html

{% load static %}

<link rel="stylesheet" href="{% static 'css/main.min.css' %}">

Использование cssnano рекомендуется tailwind. Purge не поддерживается в новых версиях. смотрите документацию

Вернуться на верх