This is the frontend for the BlockProffer project. It is a React app.
This is a quick guide on how to connect a React app with Tailwind CSS.
npm install -D tailwindcss
npx tailwindcss init
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
@tailwind base;
@tailwind components;
@tailwind utilities;
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
import './dist/output.css'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link href="/dist/output.css" rel="stylesheet">
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.tailwindcss.com"></script>
</body>
</html>
import React from 'react'
function App() {
return (
<div className="bg-gray-200">
<h1 className="text-4xl text-center">Hello World</h1>
</div>
)
}
export default App
This is a quick guide on how to connect Tailwind CSS with Daisy UI.
npm install daisyui
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [
require('daisyui'),
],
}