Añadir estilos a la aplicación

Vamos a añadir estilos a nuestra aplicación utilizando CSS.

src/style.css #

1body {
2  font-family: Arial, sans-serif;
3  max-width: 600px;
4  margin: 50px auto;
5  padding: 20px;
6}
7
8h1 {
9  text-align: center;
10}
11
12input {
13  padding: 10px;
14  width: 70%;
15}
16
17button {
18  padding: 10px 15px;
19  cursor: pointer;
20}
21
22li {
23  margin-top: 10px;
24  padding: 10px;
25  background-color: #f2f2f2;
26}

Importarlo desde main.js #

Al principio de src/main.js:

1import "./style.css";
2import dayjs from "dayjs";

Así Vite procesa también el CSS.

La estructura final quedaría:

1taskapp/
2├── index.html
3├── package.json
4├── package-lock.json
5├── node_modules/
6└── src/
7    ├── main.js
8    └── style.css