feat: add tailwindcss linter (#79)

## Context

Rules enforcing best practices and consistency using [Tailwind
CSS](https://tailwindcss.com/).

## Changes

- Added: new package `eslint-plugin-tailwindcss`
- Updated: jest snapshots
- Fixed: linting issues 

## Checklist

- [x] My code follows the style guidelines of this project
- [x] I have performed a self-review of my own code
- [x] I have commented my code, particularly in hard-to-understand areas
- [x] I have made corresponding changes to the documentation
- [x] I have tested my code for breaking changes and added the
corresponding footer in this PR if needed
- [x] I have added tests that prove my fix is effective or that my
feature works

.eslintrc

@@ -6,6 +6,7 @@
 		"eslint:recommended",
 		"plugin:react/recommended",
 		"plugin:@typescript-eslint/recommended",
+		"plugin:tailwindcss/recommended",
 		"prettier",
 	],
 	"settings": {

app/__tests__/__snapshots__/snapshot.tsx.snap

@@ -19,7 +19,7 @@ exports[`renders homepage unchanged 1`] = `
         </code>
       </p>
       <div
-        class="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none"
+        class="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none"
       >
         <a
           class="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
@@ -47,7 +47,7 @@ exports[`renders homepage unchanged 1`] = `
       </div>
     </div>
     <div
-      class="before:bg-gradient-radial after:bg-gradient-conic relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]"
+      class="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]"
     >
       <svg
         class="relative h-9 w-44 text-black dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"

app/page.tsx

@@ -8,7 +8,7 @@ export default function Home() {
 					Get started by editing 
 					<code className="font-mono font-bold">app/page.tsx</code>
 				</p>
-				<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+				<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
 					<a
 						className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
 						href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
@@ -24,7 +24,7 @@ export default function Home() {
 				</div>
 			</div>
 
-			<div className="before:bg-gradient-radial after:bg-gradient-conic relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
+			<div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px]">
 				<Next className="relative h-9 w-44 text-black dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert" />
 			</div>
 

package.json

@@ -48,6 +48,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "5.1.3",
 		"eslint-plugin-react": "^7.34.1",
+		"eslint-plugin-tailwindcss": "^3.15.1",
 		"eslint-plugin-testing-library": "^6.2.0",
 		"husky": "^9.0.11",
 		"inquirer": "9.2.17",