Tailwind - rvdegroen/notes GitHub Wiki
As the website describes: "Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file. It's fast, flexible and reliable with zero-runtime." Tailwind comes with a set of pre-defined CSS classes that can be used to quickly create consistent and responsive designs.
With Tailwind you write less custom CSS and you can style elements by applying classes directly into your HTML. It speeds up the development process by writing less code.
You can use Tailwind with Sass, which supports mixins. Some people use a combination of Sass and Tailwind to add more customizability to their projects. With this combination, you can use Sass to create custom mixins that uses Tailwind's classes, allowing you to customize your elements further. This enables you to take advantage of the power of both libraries and keep the design consistent and efficient.
There are alot of reasons to use Tailwind, which is also why we used this library.
To use Tailwind you can follow these steps:
-
Install Tailwindcss with npm:
npm install -D tailwindcss -
Add paths to all your template files in your
tailwind.config.js, like so:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
- Add the Tailwind directives to your CSS. For example in your
src/input.cssit would look like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
-
Start the Tailwind CLI build process to scan the template files for classes and build your CSS with:
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch -
Start using Tailwind in your HTML by adding your compiled CSS to the
<head></head>like so:<link href="/dist/output.css" rel="stylesheet">
You can use Tailwind classes like so:
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>