Как я могу избавиться от контура/границы на этом входе с Tailwindcss? ⇐ CSS

[Anonymous]

Я работаю над проектом списка дел, и я решил впервые попробовать Tailwindcss. Это было здорово, пока я не начал работать над формой для добавления задач. Я осмотрел онлайн и попробовал все решения, которые я мог найти, но не повезло. Код>, пограничный прозрачный , фокус: пограничный прозрачный , фокус: Ring-0
Еще одна проблема, которую я возник,-расширение Входные данные, чтобы заполнить ширину их контейнера. В инструментах Chrome Dev я просто добавил ширину: 100%, и это сработало. В документах о хвосте не так ли это, как W-full ? Форма:

Код: < /p>
import './style.css';
import Task from './create-task';

const addTaskBtn = document.querySelector('.add-task');
const taskList = document.querySelector('.task-list');

addTaskBtn.addEventListener('click', appendTaskForm);

function appendTaskForm() {
addTaskBtn.removeEventListener('click', appendTaskForm);
const newLi = document.createElement('li');

const titleLabel = document.createElement('label');
const titleInput = document.createElement('input');

const detailsLabel = document.createElement('label');
const detailsInput = document.createElement('input');

const dateLabel = document.createElement('label');
const dateInput = document.createElement('input');

const deleteBtn = document.createElement('img');

const taskForm = document.createElement('form');

deleteBtn.src = './images/delete-icon.svg';

const row1 = document.createElement('p');
const row2 = document.createElement('p');
const row3 = document.createElement('p');

titleInput.setAttribute('type', 'text');
titleInput.setAttribute('id', 'title');
titleInput.setAttribute('placeholder', 'What do I need to do?');

titleLabel.setAttribute('for', 'title');
titleLabel.textContent = 'Title:';

detailsInput.setAttribute('type', 'text');
detailsInput.setAttribute('id', 'details');
detailsInput.setAttribute(
'placeholder',
"e.g 'needs to be done before the guests arrive at 5pm'"
);

detailsLabel.setAttribute('for', 'details');
detailsLabel.textContent = 'Details:';

dateInput.setAttribute('type', 'date');
dateInput.setAttribute('id', 'date');

dateLabel.setAttribute('for', 'date');
dateLabel.textContent = 'Due date:';

titleInput.classList.add('bg-transparent', 'w-full', 'max-w-xs');
detailsInput.classList.add('bg-transparent');
dateInput.classList.add('bg-transparent', 'ml-5');

row1.classList.add('flex');
row2.classList.add('flex');
row3.classList.add('flex');

newLi.classList.add(
'pl-4',
'border',
'rounded',
'border-lightBlue',
'align-middle',
'py-2',
'gap-2'
);

row1.appendChild(titleLabel);
row1.appendChild(titleInput);
row2.appendChild(detailsLabel);
row2.appendChild(detailsInput);
row3.appendChild(dateLabel);
row3.appendChild(dateInput);

taskForm.appendChild(row1);
taskForm.appendChild(row2);
taskForm.appendChild(row3);

newLi.appendChild(taskForm);
taskList.appendChild(newLi);
}


Подробнее здесь: https://stackoverflow.com/questions/737 ... ailwindcss