🍈 Zettelkasten

A CSS framework that uses modular utility components to create intricate designs very fast. All of the css will be classes inside of your HTML tags. Should be used with ReactJS

Installation (With ReactJS)

npm i tailwindcss postcss autoprefixer
npx tailwindcss init -p
Change tailwind.config.js to have:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Clear the contents of index.css and app.css
In your index.css, add the following to the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

in package.json, add the command:

    "start" : "npx tailwindcss -i ./src/index.css -o ./src/output.css --watch"

Run npm run start
in main.jsx, make the course output.css instead of index.css
in app.jsx , make the main div:

function App() {
  const [count, setCount] = useState(0)
  return (
    <>
    <div className="h-screen w-screen">
    </div>
    </>
  )
}

CDN Installation

index.html

<head>
	...
	<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

Concepts