Skip to content

Commit

Permalink
feat: tailwindcss-animate (#1734)
Browse files Browse the repository at this point in the history
  • Loading branch information
alessey authored Dec 13, 2024
1 parent cc99956 commit f7f3ff4
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 49 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,7 @@
"graphql": "^14 || ^15 || ^16",
"graphql-request": "^6.1.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"viem": "^2.21.33",
"wagmi": "^2.12.24"
},
Expand Down
3 changes: 2 additions & 1 deletion playground/nextjs-app-router/onchainkit/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@coinbase/onchainkit",
"version": "0.35.8",
"version": "0.36.0",
"type": "module",
"repository": "https://github.com/coinbase/onchainkit.git",
"license": "MIT",
Expand Down Expand Up @@ -40,6 +40,7 @@
"graphql": "^14 || ^15 || ^16",
"graphql-request": "^6.1.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7",
"viem": "^2.21.33",
"wagmi": "^2.12.24"
},
Expand Down
14 changes: 14 additions & 0 deletions src/styles/tailwind-base.css
Original file line number Diff line number Diff line change
Expand Up @@ -250,5 +250,19 @@
}
}

@layer components {
.animate-enterRight {
@apply animate-in slide-in-from-right-8 fade-in duration-500;
}

.animate-enterUp {
@apply animate-in slide-in-from-bottom-8 fade-in duration-500;
}

.animate-enterDown {
@apply animate-in slide-in-from-top-8 fade-in duration-500;
}
}

@tailwind utilities;
@tailwind components;
49 changes: 1 addition & 48 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,54 +11,7 @@ export default {
fontFamily: {
display: 'DM Sans, sans-serif',
},
keyframes: {
fadeInRight: {
'0%': {
opacity: '0',
transform: 'translate(2rem)',
},
'100%': {
opacity: '1',
transform: 'translate(0)',
},
},
fadeInUp: {
'0%': {
opacity: '0',
transform: 'translateY(2rem)',
},
'100%': {
opacity: '1',
transform: 'translateY(0)',
},
},
fadeInDown: {
'0%': {
opacity: '0',
transform: 'translateY(-2rem)',
},
'100%': {
opacity: '1',
transform: 'translateY(0)',
},
},
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
},
animation: {
enterRight: 'fadeInRight 500ms ease-out',
enterUp: 'fadeInUp 500ms ease-out',
enterDown: 'fadeInDown 500ms ease-out',
fadeIn: 'fadeIn 100ms ease-out',
fadeOut: 'fadeOut 100ms ease-in',
},
},
},
plugins: [],
plugins: [require('tailwindcss-animate')],
};
10 changes: 10 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -2163,6 +2163,7 @@ __metadata:
storybook: "npm:^8.2.9"
tailwind-merge: "npm:^2.3.0"
tailwindcss: "npm:^3.4.3"
tailwindcss-animate: "npm:^1.0.7"
tsup: "npm:^8.3.5"
typescript: "npm:~5.3.3"
viem: "npm:^2.21.33"
Expand Down Expand Up @@ -14785,6 +14786,15 @@ __metadata:
languageName: node
linkType: hard

"tailwindcss-animate@npm:^1.0.7":
version: 1.0.7
resolution: "tailwindcss-animate@npm:1.0.7"
peerDependencies:
tailwindcss: "*"
checksum: ec7dbd1631076b97d66a1fbaaa06e0725fccfa63119221e8d87a997b02dcede98ad88bb1ef6665b968f5d260fcefb10592e0299ca70208d365b37761edf5e19a
languageName: node
linkType: hard

"tailwindcss@npm:^3.4.3":
version: 3.4.4
resolution: "tailwindcss@npm:3.4.4"
Expand Down

0 comments on commit f7f3ff4

Please sign in to comment.