🍈 Zettelkasten

Tailwind

1 min read

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)

  1. npm i tailwindcss postcss autoprefixer
  2. npx tailwindcss init -p
  3. Change tailwind.config.js to have:
/** @type {import('tailwindcss').Config} */
export default {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
  1. Clear the contents of index.css and app.css
  2. In your index.css, add the following to the top:
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. in package.json, add the command:
    "start" : "npx tailwindcss -i ./src/index.css -o ./src/output.css --watch"
  1. Run npm run start
  2. in main.jsx, make the course output.css instead of index.css
  3. 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

Graph View

Backlinks