Feat: Wrap CSS file in a Node.js package

- Update directory structure
- Move and rename CSS file
- Add package.json
- Update README.md
- Add build script (with mkdirp)
- Add format script (with prettier)
- Add GitHub action for publishing

Closes #3

.github/workflows/publish.yml

@@ -0,0 +1,35 @@
+name: Publish to npm with pnpm
+
+on:
+  push:
+    tags:
+      - "v*" # Triggers when pushing tags like v1.0.0
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js and pnpm
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          registry-url: "https://registry.npmjs.org/"
+          cache: "pnpm"
+
+      - name: Install pnpm
+        run: corepack enable
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build package
+        run: pnpm run build
+
+      - name: Publish to npm
+        run: pnpm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

.prettierignore

@@ -1 +1 @@
-tailwindcss-animate.css
+src/tailwind-animate.css

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "useTabs": false,
+  "tabWidth": 2
+}

README.md

@@ -1,21 +1,61 @@
-# tailwindcss-animate-v4
+# tailwind-animate-css
 
-TailwindCSS v4.0 compatible replacement for `tailwindcss-animate` ([GitHub](https://github.com/jamiebuilds/tailwindcss-animate/), [npm](https://www.npmjs.com/package/tailwindcss-animate)).
+TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`
+([GitHub][Original_Plugin_GitHub], [npm][Original_Plugin_NPM]).
 
-## Quick start
+Instead of being an old-fashioned JavaScript plugin, this package provides a
+CSS file defining custom utilities based on the new
+[CSS-first architecture][TailwindCSS_Custom_Utilities].
 
-1. Download the [`tailwindcss-animate.css`](https://raw.githubusercontent.com/Wombosvideo/tailwindcss-animate-v4/refs/heads/main/tailwindcss-animate.css) file from GitHub and place it next to your `app.css`.
-2. Add the following line to your `app.css`:
+## Installation
+
+### NPM
+
+1. Install the package with `npm`:
+
+   ```bash
+   npm install tailwind-animate-css
+   ```
+
+2. Add the following line to your `app.css` or `globals.css` file:
+
+   ```css
+   @import "tailwind-animate-css";
+   ```
+
+   > [!NOTE]
+   > This works with esbuild, Vite and probably other bundlers too. If you are
+   > using a different bundler, the syntax may differ.
+   > [Let me know][Create_Issue] how it works and I'll update the documentation.
+
+3. Start using the animations!
+
+### Manual download
+
+1. Download the [`tailwind-animate.css`][CSS_File]
+   file from GitHub and place it next to your `app.css`.
+2. Add the following line to your `app.css` or `globals.css` file:
 
    ```css
-   @import './tailwindcss-animate.css';
+   @import "./tailwind-animate.css";
    ```
 
 3. Start using the animations!
 
 ## Usage
 
-Refer to the [original documentation](https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md) for more information.
+Refer to the [original documentation][Original_Plugin_Docs] for more information.
 
 > [!NOTE]
-> I use very litte of the original library, so it might not be a 100% compatible drop-in replacement. If you notice any inconsistencies, feel free to contribute to this repository by opening a pull-request.
+> I use very litte of the original library, so it might not be a 100% compatible
+> drop-in replacement. If you notice any inconsistencies, feel free to contribute
+> to this repository by opening a pull-request.
+
+<!-- Links -->
+
+[Original_Plugin_GitHub]: https://github.com/jamiebuilds/tailwindcss-animate
+[Original_Plugin_NPM]: https://www.npmjs.com/package/tailwindcss-animate
+[Original_Plugin_Docs]: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/README.md
+[TailwindCSS_Custom_Utilities]: https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities
+[Create_Issue]: https://github.com/Wombosvideo/tailwind-animate-css/issues/new
+[CSS_File]: https://raw.githubusercontent.com/Wombosvideo/tailwind-animate-css/refs/heads/main/src/tailwind-animate.css

package.json

@@ -0,0 +1,36 @@
+{
+  "name": "tailwind-animate-css",
+  "version": "1.2.0",
+  "description": "TailwindCSS v4.0 compatible replacement for `tailwindcss-animate`.",
+  "scripts": {
+    "build": "mkdirp dist && cp src/tailwind-animate.css dist/",
+    "format": "prettier --write ."
+  },
+  "main": "dist/tailwind-animate.css",
+  "exports": {
+    ".": "./dist/tailwind-animate.css"
+  },
+  "keywords": [
+    "tailwindcss-animate",
+    "tailwindcss",
+    "animation"
+  ],
+  "author": {
+    "name": "Luca Bosin",
+    "url": "https://github.com/Wombosvideo"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/Wombosvideo/tailwind-animate-css",
+  "bugs": {
+    "url": "https://github.com/Wombosvideo/tailwind-animate-css/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Wombosvideo/tailwind-animate-css.git"
+  },
+  "packageManager": "[email protected]",
+  "devDependencies": {
+    "mkdirp": "^3.0.1",
+    "prettier": "^3.5.3"
+  }
+}

tailwindcss-animate.css → src/tailwind-animate.css

@@ -8,7 +8,7 @@
  * @license MIT
  */
 
-@theme inline {
+@theme {
   --animation-delay-0: 0s;
   --animation-delay-75: 75ms;
   --animation-delay-100: 0.1s;