rg3915

Adicionar

Adicionar um registro com AlpineJS

atualize a lista de itens com spread operator

saveData() {
  if (!this.contato.nome) {
    this.required = true

rg3915

<div class="flex h-screen">
  <div class="flex flex-col relative w-1/4 bg-slate-800 border-r border-gray-200">
    <button class="absolute -right-4 top-12 h-8 w-8 bg-slate-800 text-gray-50 rounded-full border border-gray-200 z-10"><</button>
  </div>
  <div class="relative w-3/4 overflow-y-scroll bg-zinc-800">
    <div class="absolute h-10 w-10 bg-yellow-500 flex items-center justify-center">1</div>
    <div class="absolute right-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">2</div>
    <div class="absolute right-0 bottom-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">3</div>
    <div class="absolute bottom-0 h-10 w-10 bg-yellow-500 flex items-center justify-center">4</div>
    <div class="absolute top-1/2 left-1/2 h-10 w-10 bg-red-500 flex items-center justify-center">5</div>

rg3915

Pycharm         IDE - editor de texto
VS Code         editor de texto
Sublime text    editor de texto
Bash            terminal
CMD             terminal
Power Shell     terminal
Python          linguagem de programação
Django          framework Python
React framework node JS - frontend

rg3915

// Close alert after 2 seconds
window.setTimeout(function() {
  $('.alert').fadeTo(500, 0).slideUp(500, function() {
    $(this).remove();
  });
}, 2000);

rg3915

<div class="container px-4 mx-auto" data-path="0.0">
    <div class="flex flex-wrap -mx-3 -mb-8" data-path="0.0.0">
      <div class="w-full md:w-1/2 lg:w-1/4 px-3 mb-8" data-path="0.0.0.0">
        <div class="max-w-sm mx-auto h-full px-4 pt-6 pb-24 bg-gray-500 rounded-xl" data-path="0.0.0.0.0">
          <div class="flex items-center justify-between mb-3" data-path="0.0.0.0.0.0">
            <div class="flex items-center" data-path="0.0.0.0.0.0.0">
              <h3 class="text-lg text-white font-semibold mr-2" data-config-id="auto-txt-1-1" data-path="0.0.0.0.0.0.0.0">To do</h3>
              <span class="inline-flex items-center justify-center w-6 h-7 rounded-full bg-gray-600 text-xs font-medium text-gray-400" data-config-id="auto-txt-2-1" data-path="0.0.0.0.0.0.0.1">3</span>
            </div>
            <div data-path="0.0.0.0.0.0.1">

rg3915

<!-- https://daily-dev-tips.com/posts/tailwind-grid-responsive-4-column-blocks/ -->
<div class="container mx-auto">
    <div class="gap-6 grid-cols-1 grid lg:grid-cols-4 md:grid-cols-2">
        <div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
            1
        </div>
        <div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
            2
        </div>
        <div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">

rg3915

<!-- https://play.tailwindcss.com/ -->
<!-- https://larainfo.com/blogs/tailwind-css-simple-admin-dashboard-ui-example -->
<!-- https://demos.creative-tim.com/argon-dashboard-tailwind/ -->
<div class="flex h-screen">
    <!-- menu -->
    <div class="px-4 py-2 bg-gray-200 bg-indigo-600 lg:w-1/4">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-white inline lg:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
        <div class="hidden lg:block">

rg3915

import sublime
import sublime_plugin
import json
import re


class TailwindOrderCommand(sublime_plugin.TextCommand):

    def create_filters(self):
        settings = sublime.load_settings('tailwind-order.sublime-settings')

rg3915

Usei um node mais recente, e mesmo assim ele não reconhece o css.

nvm use 18.3.0
npm init
npm install -D tailwindcss
npx tailwindcss init
npx tailwindcss -i ./src/input.css -o ./dist/output.css -w

rg3915

https://docs.djangoproject.com/en/4.0/ref/settings/#csrf-trusted-origins