Initial commit
This commit is contained in:
mickeymarse
parent
35791cdad5
commit
6e00ef10cd
|
|
@ -0,0 +1 @@
|
|||
YOUR_ENV=
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
.eslintrc.js
|
||||
.nuxt
|
||||
.output
|
||||
/.quasar
|
||||
/dist
|
||||
/node_modules
|
||||
babel.config.js
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
module.exports = {
|
||||
// https://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy
|
||||
// This option interrupts the configuration hierarchy at this file
|
||||
// Remove this if you have an higher level ESLint config file (it usually happens into a monorepos)
|
||||
root: true,
|
||||
|
||||
parserOptions: {
|
||||
parser: '@babel/eslint-parser',
|
||||
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
|
||||
sourceType: 'module' // Allows for the use of imports
|
||||
},
|
||||
|
||||
env: {
|
||||
browser: true,
|
||||
'vue/setup-compiler-macros': true
|
||||
},
|
||||
|
||||
// Rules order is important, please avoid shuffling them
|
||||
extends: [
|
||||
// Base ESLint recommended rules
|
||||
// 'eslint:recommended',
|
||||
|
||||
// Uncomment any of the lines below to choose desired strictness,
|
||||
// but leave only one uncommented!
|
||||
// See https://eslint.vuejs.org/rules/#available-rules
|
||||
'plugin:vue/vue3-essential', // Priority A: Essential (Error Prevention)
|
||||
// 'plugin:vue/vue3-strongly-recommended', // Priority B: Strongly Recommended (Improving Readability)
|
||||
// 'plugin:vue/vue3-recommended', // Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
|
||||
|
||||
'standard'
|
||||
|
||||
],
|
||||
|
||||
plugins: [
|
||||
// https://eslint.vuejs.org/user-guide/#why-doesn-t-it-work-on-vue-files
|
||||
// required to lint *.vue files
|
||||
'vue',
|
||||
|
||||
],
|
||||
|
||||
globals: {
|
||||
ga: 'readonly', // Google Analytics
|
||||
process: 'readonly',
|
||||
chrome: 'readonly'
|
||||
},
|
||||
|
||||
// add your custom rules here
|
||||
rules: {
|
||||
// allow async-await
|
||||
'generator-star-spacing': 'off',
|
||||
// allow paren-less arrow functions
|
||||
'arrow-parens': 'off',
|
||||
'one-var': 'off',
|
||||
|
||||
'import/first': 'off',
|
||||
'import/named': 'error',
|
||||
'import/namespace': 'error',
|
||||
'import/default': 'error',
|
||||
'import/export': 'error',
|
||||
'import/extensions': 'off',
|
||||
'import/no-unresolved': 'off',
|
||||
'import/no-extraneous-dependencies': 'off',
|
||||
'prefer-promise-reject-errors': 'off',
|
||||
|
||||
// allow debugger during development only
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
||||
|
||||
// custom
|
||||
'semi': [2, 'always'],
|
||||
'space-before-function-paren': [2, 'always'],
|
||||
'keyword-spacing': [2, { before: true, after: true }],
|
||||
'space-before-blocks': [2, 'always'],
|
||||
'comma-dangle': [2, 'always-multiline'],
|
||||
'no-console': 'off',
|
||||
'no-multi-str': 'off',
|
||||
'curly': 1,
|
||||
'no-undef': 'off',
|
||||
|
||||
// plugins
|
||||
'vue/multi-word-component-names': 'off'
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
node_modules
|
||||
*.log*
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
.output
|
||||
.env
|
||||
dist
|
||||
.DS_Store
|
||||
.firebase/*
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"editor.codeActionsOnSave": [
|
||||
"source.fixAll.eslint"
|
||||
],
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"vue"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
84
README.md
84
README.md
|
|
@ -1,2 +1,84 @@
|
|||
# bananarchist-site
|
||||
<p style="text-align: center">
|
||||
<img style="width: 900px" src="Nuxtwind Daisy Banner.jpg"/>
|
||||
</p>
|
||||
|
||||
<h1 align="center">Nuxtwind Daisy 🟢💨🌼</h1>
|
||||
<p style="text-align: center">
|
||||
Nuxtwind Daisy is a starter template for Nuxt.js 3 + Tailwind CSS + Daisy UI with additional installed setup for custom font, icons, animation, and more.
|
||||
</p>
|
||||
|
||||
- [Showcase](#showcase)
|
||||
- [Getting Started Guide](#getting-started-guide)
|
||||
|
||||
# Showcase
|
||||
|
||||
Brag your modified version from this template. 💪
|
||||
|
||||
- [jofftiquez.dev](https://jofftiquez.dev)
|
||||
|
||||
# Getting Started Guide
|
||||
|
||||
## Installation
|
||||
|
||||
Nope. No installation needed.
|
||||
|
||||
## Fork
|
||||
|
||||
Fork this repository to your own GitHub account.
|
||||
|
||||
<img width="800" src="fork.png">
|
||||
|
||||
Make it yours. Rename it. Change the description. Hit Create fork.
|
||||
|
||||
<img width="800" src="make-it-yours.png">
|
||||
|
||||
## Make changes
|
||||
|
||||
I will assume that you already know the basic of nuxt.js. If not, you can check out their [documentation](https://nuxt.com/docs/getting-started/introduction).
|
||||
|
||||
Now that it's yours, you can make changes to it. Be creative you can start by removing the contents in the `pages/index.vue`. Feel free to utilize the `GenericPanel.vue` component as it adds a nice balance to the layout.
|
||||
|
||||
## Preview
|
||||
|
||||
You can preview your build by running the `nuxt start` command.
|
||||
|
||||
```bash
|
||||
# Preview your build
|
||||
$ nuxt start
|
||||
```
|
||||
|
||||
## Build
|
||||
|
||||
You can choose to build it using the defaul strategy which is SSR, but you also have the option to generate static files so you can just upload your work in any static hosting service. The sample site of this repo is hosted in Vercel.
|
||||
|
||||
|
||||
```bash
|
||||
# Build for production using SSR
|
||||
$ nuxt build
|
||||
```
|
||||
|
||||
```bash
|
||||
# Build for production and generate static files
|
||||
$ nuxt generate
|
||||
```
|
||||
|
||||
## Deploy
|
||||
|
||||
You can deploy your work in any static hosting service.
|
||||
|
||||
Here's a list of static hosting services that you can use:
|
||||
|
||||
- [Vercel](https://vercel.com/)
|
||||
- [Netlify](https://www.netlify.com/)
|
||||
- [Firebase](https://firebase.google.com/)
|
||||
- [Surge](https://surge.sh/)
|
||||
- [Render](https://render.com/)
|
||||
- [GitHub Pages](https://pages.github.com/)
|
||||
- [GitLab Pages](https://docs.gitlab.com/ee/user/project/pages/)
|
||||
- [AWS Amplify](https://aws.amazon.com/amplify/)
|
||||
- [Cloudflare Pages](https://pages.cloudflare.com/)
|
||||
- [Begin](https://begin.com/)
|
||||
- [Fast.io](https://fast.io/)
|
||||
- [Fly](https://fly.io/)
|
||||
- [Deta](https://www.deta.sh/)
|
||||
- [Aerobatic](https://www.aerobatic.com/)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
// eslint-disable-next-line no-undef
|
||||
export default defineAppConfig({});
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div>
|
||||
<NuxtLayout>
|
||||
<NuxtPage/>
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
/* eslint-disable */
|
||||
|
||||
module.exports = api => {
|
||||
return {
|
||||
presets: [
|
||||
[
|
||||
api.caller(caller => caller && caller.target === 'node')
|
||||
? { targets: { node: 'current' } }
|
||||
: {}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
|
|
@ -0,0 +1,85 @@
|
|||
// const LANG = 'en_US';
|
||||
// const TYPE = 'website';
|
||||
// const URL = 'https://hippocrades.com';
|
||||
// const SITE_NAME = 'hippocrades.com';
|
||||
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
// eslint-disable-next-line no-undef
|
||||
export default defineNuxtConfig({
|
||||
preset: 'node-server',
|
||||
|
||||
modules: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
'nuxt-headlessui',
|
||||
'nuxt-gtag',
|
||||
],
|
||||
|
||||
gtag: {
|
||||
id: 'G-M1KERXTK1H', // TODO: Add your google analytics 4 tag here
|
||||
},
|
||||
|
||||
srcDir: './src',
|
||||
|
||||
runtimeConfig: {
|
||||
public: {
|
||||
yourEnv: process.env.YOUR_ENV,
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
{
|
||||
src: '@/plugins/aos',
|
||||
ssr: false,
|
||||
mode: 'client',
|
||||
},
|
||||
],
|
||||
|
||||
app: {
|
||||
head: {
|
||||
link: [
|
||||
{
|
||||
rel: 'stylesheet',
|
||||
href: 'https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
tailwindcss: {
|
||||
cssPath: '~/assets/css/tailwind.css',
|
||||
configPath: 'tailwind.config',
|
||||
exposeConfig: false,
|
||||
exposeLevel: 2,
|
||||
config: {},
|
||||
injectPosition: 'first',
|
||||
viewer: true,
|
||||
},
|
||||
|
||||
headlessui: {
|
||||
prefix: 'Headless',
|
||||
},
|
||||
|
||||
build: {
|
||||
extend (config, ctx) {
|
||||
config.resolve.symlinks = false;
|
||||
},
|
||||
},
|
||||
|
||||
image: {
|
||||
dir: 'assets/images',
|
||||
screens: {
|
||||
xs: 320,
|
||||
sm: 640,
|
||||
md: 768,
|
||||
lg: 1024,
|
||||
xl: 1280,
|
||||
xxl: 1536,
|
||||
'2xl': 1536,
|
||||
'3xl': 1920,
|
||||
},
|
||||
},
|
||||
|
||||
devtools: {
|
||||
enabled: true,
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
{
|
||||
"name": "nuxtwind-daisy",
|
||||
"version": "1.0.0",
|
||||
"main": ".eslintrc.js",
|
||||
"description": "Nuxtwind Daisy is a starter template for Nuxt.js 3 + Tailwind CSS + Daisy UI with additional installed setup for custom font, icons, animation, and more.",
|
||||
"productName": "Nuxtwind Daisy 🟢💨🌼",
|
||||
"author": "Joff Tiquez <jofftiquez@gmail.com>",
|
||||
"scripts": {
|
||||
"lint": "eslint --ext .js,.vue ./ --fix",
|
||||
"build": "nuxt build",
|
||||
"postbuild": "cd .output/server && rimraf node_modules && yarn && cd .. && yarn rename-server",
|
||||
"rename-server": "node scripts/rename-server.js",
|
||||
"dev": "nuxt dev",
|
||||
"generate": "nuxt generate",
|
||||
"serve": "firebase emulators:start",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/eslint-parser": "^7.23.3",
|
||||
"@nuxt/devtools": "^1.0.6",
|
||||
"@nuxtjs/tailwindcss": "^6.10.3",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tailwindcss/forms": "^0.5.7",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
"eslint-plugin-import": "^2.29.1",
|
||||
"eslint-plugin-n": "^16.6.1",
|
||||
"eslint-plugin-promise": "^6.1.1",
|
||||
"eslint-plugin-vue": "^9.19.2",
|
||||
"eslint-webpack-plugin": "^4.0.1",
|
||||
"nuxt": "^3.9.1",
|
||||
"nuxt-gtag": "^1.1.2",
|
||||
"nuxt-headlessui": "^1.1.5",
|
||||
"rimraf": "^5.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tailwindcss/typography": "^0.5.10",
|
||||
"aos": "^3.0.0-beta.6",
|
||||
"axios": "^1.6.4",
|
||||
"daisyui": "^4.5.0",
|
||||
"postcss-custom-properties": "^13.3.4"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/ossphilippines/nuxtwind-daisy.git"
|
||||
},
|
||||
"license": "MIT",
|
||||
"bugs": {
|
||||
"url": "https://github.com/ossphilippines/nuxtwind-daisy/issues"
|
||||
},
|
||||
"homepage": "https://github.com/ossphilippines/nuxtwind-daisy#readme"
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
/*
|
||||
* This method is meant to be run after the Nuxt build process.
|
||||
* It will rename the Nuxt server function to a custom name.
|
||||
* This is done to avoid conflicts with the Firebase Functions handler function.
|
||||
* The Firebase Functions handler function is named "nuxtSSRHandler".
|
||||
* Because sometimes you want to upload more than one Nuxt app to Firebase Functions.
|
||||
*/
|
||||
|
||||
const nodeFs = require('node:fs');
|
||||
const readFile = nodeFs.readFile;
|
||||
const writeFileSync = nodeFs.writeFileSync;
|
||||
const serverFunctionName = 'nuxtSSRHandler';
|
||||
|
||||
readFile('.output/server/index.mjs', 'utf-8', (errRead, contents) => {
|
||||
if (errRead) {
|
||||
return console.error(errRead);
|
||||
}
|
||||
|
||||
console.log('Found index.mjs file contents:', contents);
|
||||
|
||||
const updated = contents.replace(
|
||||
/{ s as server }/gi,
|
||||
'{ s as ' + serverFunctionName + ' }',
|
||||
);
|
||||
|
||||
console.log('Replacing nuxt server function name with ' + serverFunctionName);
|
||||
|
||||
writeFileSync('.output/server/index.mjs', updated, 'utf-8');
|
||||
});
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
/* Custom fonts here */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
font-family: 'Inter', sans-serif;
|
||||
@apply text-gray-900;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply normal-case;
|
||||
}
|
||||
|
||||
.title-hero {
|
||||
@apply text-7xl text-gray-900;
|
||||
}
|
||||
|
||||
.subtitle-hero {
|
||||
@apply text-3xl text-gray-500;
|
||||
}
|
||||
|
||||
.title-panel {
|
||||
@apply text-6xl text-gray-900;
|
||||
}
|
||||
|
||||
.subtitle-panel {
|
||||
@apply text-3xl text-gray-500;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
|
|
@ -0,0 +1,5 @@
|
|||
<template>
|
||||
<div class="mx-auto md:max-w-6xl px-5 py-5 md:py-7">
|
||||
<slot/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
<template>
|
||||
<div :data-theme="theme">
|
||||
<div class="navbar fixed bg-base-100 z-40 shadow-sm">
|
||||
<div class="navbar-start">
|
||||
<a class="btn btn-ghost md:text-xl">Nuxtwind Daisy</a>
|
||||
</div>
|
||||
<div class="navbar-center hidden lg:flex">
|
||||
<!-- TODO: You can add menu here -->
|
||||
</div>
|
||||
<div class="navbar-end">
|
||||
<select v-model="theme" class="select select-primary md:w-full md:max-w-xs">
|
||||
<option disabled selected>Select Theme</option>
|
||||
<option v-for="theme in themes" :value="theme" :key="theme">
|
||||
<span class="uppercase">{{ theme }}</span>
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<slot />
|
||||
<footer class="footer footer-center p-10 bg-base-50">
|
||||
<div>
|
||||
<h1 class="text-2xl md:text-3xl font-bold">Nuxtwind Daisy</h1>
|
||||
<p class="md:font-bold">
|
||||
Create beautiful and fast websites without the tedious setup
|
||||
</p>
|
||||
<p>Copyright © {{new Date().getFullYear()}} - All right reserved</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a href="https://twitter.com/jrtiquez" target="_blank">
|
||||
<i class="lab la-twitter text-4xl"></i>
|
||||
</a>
|
||||
<a href="https://github.com/ossphilippines/nuxtwind-daisy" target="_blank">
|
||||
<i class="lab la-github text-4xl"></i>
|
||||
</a>
|
||||
<a href="https://facebook.com/ossph.org" target="_blank">
|
||||
<i class="lab la-facebook text-4xl"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, watch, onMounted } from 'vue';
|
||||
const THEMES = [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
];
|
||||
export default {
|
||||
setup () {
|
||||
const theme = ref(null);
|
||||
watch(theme, (value) => {
|
||||
localStorage.setItem('daisyui-theme', value);
|
||||
});
|
||||
onMounted(() => {
|
||||
theme.value = localStorage.getItem('daisyui-theme') || 'dark';
|
||||
});
|
||||
return {
|
||||
theme,
|
||||
themes: THEMES,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
import { abortNavigation } from '#app';
|
||||
|
||||
export default defineNuxtRouteMiddleware((to, from) => {
|
||||
const excludeRoutes = [
|
||||
// TODO: add the routes you want to exclude here
|
||||
];
|
||||
if (excludeRoutes.includes(to.name)) {
|
||||
return abortNavigation();
|
||||
}
|
||||
return navigateTo('/');
|
||||
});
|
||||
|
|
@ -0,0 +1,337 @@
|
|||
<template>
|
||||
|
||||
<div class="hero min-h-screen bg-base-200">
|
||||
<div class="hero-content text-center">
|
||||
<div class="max-w-xl">
|
||||
<h1 data-aos="fade-down" class="text-4xl md:text-7xl font-bold mb-6">Nuxtwind Daisy</h1>
|
||||
<p data-aos="fade-down" data-aos-delay="300" class="md:text-lg mb-6">Nuxtwind Daisy is a starter template project for Nuxt.js 3 + Tailwind CSS + Daisy UI with additional installed setup for custom font, icons, animation, and more.</p>
|
||||
<div class="flex justify-center space-x-5">
|
||||
<a
|
||||
data-aos="fade-down"
|
||||
data-aos-delay="600"
|
||||
class="btn btn-sm md:btn-md btn-primary"
|
||||
href="https://github.com/OSSPhilippines/nuxtwind-daisy/fork"
|
||||
target="_blank"
|
||||
>
|
||||
Fork this Project
|
||||
</a>
|
||||
<a
|
||||
data-aos="fade-down"
|
||||
data-aos-delay="600"
|
||||
class="btn btn-sm md:btn-md btn-primary btn-outline"
|
||||
href="https://github.com/OSSPhilippines/nuxtwind-daisy"
|
||||
target="_blank"
|
||||
>
|
||||
Give us a star in GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl md:text-5xl mb-5">Introduction</h1>
|
||||
<p class="md:text-lg">Create beautiful and fast websites without worrying about the tedious setup. Just fork this repository and start hacking away!</p>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl md:text-5xl mb-5">Getting Started</h1>
|
||||
<p class="md:text-lg">Read <a href="https://github.com/OSSPhilippines/nuxtwind-daisy#readme" class="text-primary">the documentation</a> on how to start quickly.</p>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="text-3xl md:text-5xl mb-5">Features</h1>
|
||||
<p class="md:text-lg">See what you can do below. Basically, every basic thing that you need is already included in this starter template project. From custom font, icons, animations, and more.</p>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col mb-5">
|
||||
<h1 class="text-xl md:text-3xl mb-5">Icons by Line Awesome <i class="las la-icons text-primary"></i></h1>
|
||||
<p class="md:text-lg">Get more icons from the <a class="text-primary" href="https://icons8.com/line-awesome" target="_blank">Line Awesome documentation</a>.</p>
|
||||
</div>
|
||||
<div class="flex space-x-5 overflow-scroll">
|
||||
<i class="las la-cat text-4xl"></i>
|
||||
<i class="las la-crow text-4xl"></i>
|
||||
<i class="las la-dog text-4xl"></i>
|
||||
<i class="las la-dove text-4xl"></i>
|
||||
<i class="las la-horse text-4xl"></i>
|
||||
<i class="las la-spider text-4xl"></i>
|
||||
<i class="las la-kiwi-bird text-4xl"></i>
|
||||
<i class="las la-beer text-4xl"></i>
|
||||
<i class="las la-glass-whiskey text-4xl"></i>
|
||||
<i class="las la-home text-4xl"></i>
|
||||
<i class="las la-birthday-cake text-4xl"></i>
|
||||
<a class="hidden md:inline text-lg mt-1 text-primary" href="https://icons8.com/line-awesome" target="_blank">and more...</a>
|
||||
</div>
|
||||
<a class="inline md:hidden text-lg mt-1 text-primary" href="https://icons8.com/line-awesome" target="_blank">and more...</a>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col mb-5">
|
||||
<h1 class="text-xl md:text-3xl mb-5">Animation by AOS.js <i class="las la-running text-primary"></i></h1>
|
||||
<p class="md:text-lg">Check <a class="text-primary" href="https://michalsnik.github.io/aos/" target="_blank">AOS.js documentation</a> for more animations.</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col md:flex-row space-y-5 md:space-y-0 md:space-x-5">
|
||||
<div data-aos="fade-down" data-aos-delay="500" class="w-full md:w-[200px] h-[200px] bg-green-200"></div>
|
||||
<div data-aos="flip-left" data-aos-delay="1000" class="w-full md:w-[200px] h-[200px] bg-red-200"></div>
|
||||
<div data-aos="zoom-in" data-aos-delay="1500" class="w-full md:w-[200px] h-[200px] bg-blue-200"></div>
|
||||
<a class="text-lg mt-1 text-primary" href="https://michalsnik.github.io/aos/" target="_blank">more animations...</a>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col mb-5">
|
||||
<h1 class="text-xl md:text-3xl mb-5">UI Components by Daisy UI 🌼 version 3</h1>
|
||||
<p class="md:text-lg">Learn more from the official <a class="text-primary" href="https://daisyui.com/" target="_blank">daisyUI documentation</a>.</p>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Buttons</h1>
|
||||
<div class="flex space-x-5 overflow-scroll">
|
||||
<button class="btn">Button</button>
|
||||
<button class="btn btn-primary">Button</button>
|
||||
<button class="btn btn-secondary">Button</button>
|
||||
<button class="btn btn-accent">Button</button>
|
||||
<button class="btn btn-ghost">Button</button>
|
||||
<button class="btn btn-link">Button</button>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Alerts</h1>
|
||||
<div class="space-y-5">
|
||||
<div class="alert shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span>12 unread messages. Tap to see.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-info shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span>New software update available.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
<span>Your purchase has been confirmed!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-warning shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
|
||||
<span>Warning: Invalid email address!</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-error shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current flex-shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
|
||||
<span>Error! Task failed successfully.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<span>we use cookies for no reason.</span>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="btn btn-sm btn-ghost">Deny</button>
|
||||
<button class="btn btn-sm btn-primary">Accept</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="alert shadow-lg">
|
||||
<div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-info flex-shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
||||
<div>
|
||||
<h3 class="font-bold">New message!</h3>
|
||||
<div class="text-xs">You have 1 unread message</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-none">
|
||||
<button class="btn btn-sm">See</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Badges</h1>
|
||||
<div class="flex space-x-5 overflow-scroll">
|
||||
<div class="badge badge-info gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
info
|
||||
</div>
|
||||
<div class="badge badge-success gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
success
|
||||
</div>
|
||||
<div class="badge badge-warning gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
warning
|
||||
</div>
|
||||
<div class="badge badge-error gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
|
||||
error
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Chat Bubbles</h1>
|
||||
<div class="flex flex-col">
|
||||
<div class="chat chat-start">
|
||||
<div class="chat-bubble chat-bubble-primary">What kind of nonsense is this</div>
|
||||
</div>
|
||||
<div class="chat chat-start">
|
||||
<div class="chat-bubble chat-bubble-secondary">Put me on the Council and not make me a Master!??</div>
|
||||
</div>
|
||||
<div class="chat chat-start">
|
||||
<div class="chat-bubble chat-bubble-accent">That's never been done in the history of the Jedi. It's insulting!</div>
|
||||
</div>
|
||||
<div class="chat chat-end">
|
||||
<div class="chat-bubble chat-bubble-info">Calm down, Anakin.</div>
|
||||
</div>
|
||||
<div class="chat chat-end">
|
||||
<div class="chat-bubble chat-bubble-success">You have been given a great honor.</div>
|
||||
</div>
|
||||
<div class="chat chat-end">
|
||||
<div class="chat-bubble chat-bubble-warning">To be on the Council at your age.</div>
|
||||
</div>
|
||||
<div class="chat chat-end">
|
||||
<div class="chat-bubble chat-bubble-error">It's never happened before.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Checkboxes</h1>
|
||||
<div class="flex flex-col">
|
||||
<div class="form-control w-52">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Remember me</span>
|
||||
<input type="checkbox" class="toggle toggle-primary" checked />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control w-52">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Remember me</span>
|
||||
<input type="checkbox" class="toggle toggle-secondary" checked />
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-control w-52">
|
||||
<label class="cursor-pointer label">
|
||||
<span class="label-text">Remember me</span>
|
||||
<input type="checkbox" class="toggle toggle-accent" checked />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">Footers</h1>
|
||||
<footer class="footer p-10 bg-base-200 text-base-content">
|
||||
<div>
|
||||
<span class="footer-title">Services</span>
|
||||
<a class="link link-hover">Branding</a>
|
||||
<a class="link link-hover">Design</a>
|
||||
<a class="link link-hover">Marketing</a>
|
||||
<a class="link link-hover">Advertisement</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="footer-title">Company</span>
|
||||
<a class="link link-hover">About us</a>
|
||||
<a class="link link-hover">Contact</a>
|
||||
<a class="link link-hover">Jobs</a>
|
||||
<a class="link link-hover">Press kit</a>
|
||||
</div>
|
||||
<div>
|
||||
<span class="footer-title">Legal</span>
|
||||
<a class="link link-hover">Terms of use</a>
|
||||
<a class="link link-hover">Privacy policy</a>
|
||||
<a class="link link-hover">Cookie policy</a>
|
||||
</div>
|
||||
</footer>
|
||||
<footer class="footer px-10 py-4 border-t bg-base-200 text-base-content border-base-300">
|
||||
<div class="items-center grid-flow-col">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" class="fill-current"><path d="M22.672 15.226l-2.432.811.841 2.515c.33 1.019-.209 2.127-1.23 2.456-1.15.325-2.148-.321-2.463-1.226l-.84-2.518-5.013 1.677.84 2.517c.391 1.203-.434 2.542-1.831 2.542-.88 0-1.601-.564-1.86-1.314l-.842-2.516-2.431.809c-1.135.328-2.145-.317-2.463-1.229-.329-1.018.211-2.127 1.231-2.456l2.432-.809-1.621-4.823-2.432.808c-1.355.384-2.558-.59-2.558-1.839 0-.817.509-1.582 1.327-1.846l2.433-.809-.842-2.515c-.33-1.02.211-2.129 1.232-2.458 1.02-.329 2.13.209 2.461 1.229l.842 2.515 5.011-1.677-.839-2.517c-.403-1.238.484-2.553 1.843-2.553.819 0 1.585.509 1.85 1.326l.841 2.517 2.431-.81c1.02-.33 2.131.211 2.461 1.229.332 1.018-.21 2.126-1.23 2.456l-2.433.809 1.622 4.823 2.433-.809c1.242-.401 2.557.484 2.557 1.838 0 .819-.51 1.583-1.328 1.847m-8.992-6.428l-5.01 1.675 1.619 4.828 5.011-1.674-1.62-4.829z"></path></svg>
|
||||
<p>ACME Industries Ltd. <br/>Providing reliable tech since 1992</p>
|
||||
</div>
|
||||
<div class="md:place-self-center md:justify-self-end">
|
||||
<div class="grid grid-flow-col gap-4">
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path></svg></a>
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path></svg></a>
|
||||
<a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current"><path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
<generic-panel>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="md:text-xl mb-5 font-bold">And more components...</h1>
|
||||
<p>Visit the official <a href="https://daisyui.com/docs/install/" target="_blank" class="text-primary">Daisy UI documentation</a>.</p>
|
||||
</div>
|
||||
</generic-panel>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { useHead } from '#app';
|
||||
import { definePageMeta } from '#imports';
|
||||
import GenericPanel from '~/components/commons/GenericPanel';
|
||||
import ogBanner from '../assets/images/nuxtwind-daisy-og-banner.jpg';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
GenericPanel,
|
||||
},
|
||||
setup () {
|
||||
definePageMeta({
|
||||
layout: 'default',
|
||||
});
|
||||
|
||||
useHead({
|
||||
title: 'Nuxtwind Daisy 🟢💨🌼',
|
||||
description: 'Nuxtwind Daisy is a starter template for Nuxt.js 3 + Tailwind CSS + Daisy UI with additional installed setup for custom font, icons, animation, and more.',
|
||||
link: [
|
||||
{ rel: 'icon', type: 'image/png', href: '/favicon.png' },
|
||||
],
|
||||
meta: [
|
||||
{
|
||||
hid: 'og:image',
|
||||
name: 'og:image',
|
||||
property: 'og:image',
|
||||
content: ogBanner,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
return {};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
import AOS from 'aos';
|
||||
import 'aos/dist/aos.css';
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
if (typeof window !== 'undefined') {
|
||||
nuxtApp.AOS = AOS.init(); // eslint-disable-line new-cap
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { defineEventHandler, getQuery } from 'h3';
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const query = getQuery(event);
|
||||
return `Hello ${query.name || 'no name'}.`;
|
||||
});
|
||||
|
|
@ -0,0 +1,955 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [],
|
||||
presets: [],
|
||||
darkMode: 'media', // or 'class'
|
||||
theme: {
|
||||
accentColor: ({ theme }) => ({
|
||||
...theme('colors'),
|
||||
auto: 'auto',
|
||||
}),
|
||||
animation: {
|
||||
none: 'none',
|
||||
spin: 'spin 1s linear infinite',
|
||||
ping: 'ping 1s cubic-bezier(0, 0, 0.2, 1) infinite',
|
||||
pulse: 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
|
||||
bounce: 'bounce 1s infinite',
|
||||
},
|
||||
aria: {
|
||||
checked: 'checked="true"',
|
||||
disabled: 'disabled="true"',
|
||||
expanded: 'expanded="true"',
|
||||
hidden: 'hidden="true"',
|
||||
pressed: 'pressed="true"',
|
||||
readonly: 'readonly="true"',
|
||||
required: 'required="true"',
|
||||
selected: 'selected="true"',
|
||||
},
|
||||
aspectRatio: {
|
||||
auto: 'auto',
|
||||
square: '1 / 1',
|
||||
video: '16 / 9',
|
||||
},
|
||||
backdropBlur: ({ theme }) => theme('blur'),
|
||||
backdropBrightness: ({ theme }) => theme('brightness'),
|
||||
backdropContrast: ({ theme }) => theme('contrast'),
|
||||
backdropGrayscale: ({ theme }) => theme('grayscale'),
|
||||
backdropHueRotate: ({ theme }) => theme('hueRotate'),
|
||||
backdropInvert: ({ theme }) => theme('invert'),
|
||||
backdropOpacity: ({ theme }) => theme('opacity'),
|
||||
backdropSaturate: ({ theme }) => theme('saturate'),
|
||||
backdropSepia: ({ theme }) => theme('sepia'),
|
||||
backgroundColor: ({ theme }) => theme('colors'),
|
||||
backgroundImage: {
|
||||
none: 'none',
|
||||
'gradient-to-t': 'linear-gradient(to top, var(--tw-gradient-stops))',
|
||||
'gradient-to-tr': 'linear-gradient(to top right, var(--tw-gradient-stops))',
|
||||
'gradient-to-r': 'linear-gradient(to right, var(--tw-gradient-stops))',
|
||||
'gradient-to-br': 'linear-gradient(to bottom right, var(--tw-gradient-stops))',
|
||||
'gradient-to-b': 'linear-gradient(to bottom, var(--tw-gradient-stops))',
|
||||
'gradient-to-bl': 'linear-gradient(to bottom left, var(--tw-gradient-stops))',
|
||||
'gradient-to-l': 'linear-gradient(to left, var(--tw-gradient-stops))',
|
||||
'gradient-to-tl': 'linear-gradient(to top left, var(--tw-gradient-stops))',
|
||||
},
|
||||
backgroundOpacity: ({ theme }) => theme('opacity'),
|
||||
backgroundPosition: {
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
'left-bottom': 'left bottom',
|
||||
'left-top': 'left top',
|
||||
right: 'right',
|
||||
'right-bottom': 'right bottom',
|
||||
'right-top': 'right top',
|
||||
top: 'top',
|
||||
},
|
||||
backgroundSize: {
|
||||
auto: 'auto',
|
||||
cover: 'cover',
|
||||
contain: 'contain',
|
||||
},
|
||||
blur: {
|
||||
0: '0',
|
||||
none: '0',
|
||||
sm: '4px',
|
||||
DEFAULT: '8px',
|
||||
md: '12px',
|
||||
lg: '16px',
|
||||
xl: '24px',
|
||||
'2xl': '40px',
|
||||
'3xl': '64px',
|
||||
},
|
||||
borderColor: ({ theme }) => ({
|
||||
...theme('colors'),
|
||||
DEFAULT: theme('colors.gray.200', 'currentColor'),
|
||||
}),
|
||||
borderOpacity: ({ theme }) => theme('opacity'),
|
||||
borderRadius: {
|
||||
none: '0px',
|
||||
sm: '0.125rem',
|
||||
DEFAULT: '0.25rem',
|
||||
md: '0.375rem',
|
||||
lg: '0.5rem',
|
||||
xl: '0.75rem',
|
||||
'2xl': '1rem',
|
||||
'3xl': '1.5rem',
|
||||
full: '9999px',
|
||||
},
|
||||
borderSpacing: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
}),
|
||||
borderWidth: {
|
||||
DEFAULT: '1px',
|
||||
0: '0px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
boxShadow: {
|
||||
sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
|
||||
DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
|
||||
md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
|
||||
lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
|
||||
xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
|
||||
'2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)',
|
||||
inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
|
||||
none: 'none',
|
||||
},
|
||||
boxShadowColor: ({ theme }) => theme('colors'),
|
||||
brightness: {
|
||||
0: '0',
|
||||
50: '.5',
|
||||
75: '.75',
|
||||
90: '.9',
|
||||
95: '.95',
|
||||
100: '1',
|
||||
105: '1.05',
|
||||
110: '1.1',
|
||||
125: '1.25',
|
||||
150: '1.5',
|
||||
200: '2',
|
||||
},
|
||||
caretColor: ({ theme }) => theme('colors'),
|
||||
colors: ({ colors }) => ({
|
||||
inherit: colors.inherit,
|
||||
current: colors.current,
|
||||
transparent: colors.transparent,
|
||||
black: colors.black,
|
||||
white: colors.white,
|
||||
slate: colors.slate,
|
||||
gray: colors.gray,
|
||||
zinc: colors.zinc,
|
||||
neutral: colors.neutral,
|
||||
stone: colors.stone,
|
||||
red: colors.red,
|
||||
orange: colors.orange,
|
||||
amber: colors.amber,
|
||||
yellow: colors.yellow,
|
||||
lime: colors.lime,
|
||||
green: colors.green,
|
||||
emerald: colors.emerald,
|
||||
teal: colors.teal,
|
||||
cyan: colors.cyan,
|
||||
sky: colors.sky,
|
||||
blue: colors.blue,
|
||||
indigo: colors.indigo,
|
||||
violet: colors.violet,
|
||||
purple: colors.purple,
|
||||
fuchsia: colors.fuchsia,
|
||||
pink: colors.pink,
|
||||
rose: colors.rose,
|
||||
}),
|
||||
columns: {
|
||||
auto: 'auto',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
8: '8',
|
||||
9: '9',
|
||||
10: '10',
|
||||
11: '11',
|
||||
12: '12',
|
||||
'3xs': '16rem',
|
||||
'2xs': '18rem',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
lg: '32rem',
|
||||
xl: '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
},
|
||||
container: {},
|
||||
content: {
|
||||
none: 'none',
|
||||
},
|
||||
contrast: {
|
||||
0: '0',
|
||||
50: '.5',
|
||||
75: '.75',
|
||||
100: '1',
|
||||
125: '1.25',
|
||||
150: '1.5',
|
||||
200: '2',
|
||||
},
|
||||
cursor: {
|
||||
auto: 'auto',
|
||||
default: 'default',
|
||||
pointer: 'pointer',
|
||||
wait: 'wait',
|
||||
text: 'text',
|
||||
move: 'move',
|
||||
help: 'help',
|
||||
'not-allowed': 'not-allowed',
|
||||
none: 'none',
|
||||
'context-menu': 'context-menu',
|
||||
progress: 'progress',
|
||||
cell: 'cell',
|
||||
crosshair: 'crosshair',
|
||||
'vertical-text': 'vertical-text',
|
||||
alias: 'alias',
|
||||
copy: 'copy',
|
||||
'no-drop': 'no-drop',
|
||||
grab: 'grab',
|
||||
grabbing: 'grabbing',
|
||||
'all-scroll': 'all-scroll',
|
||||
'col-resize': 'col-resize',
|
||||
'row-resize': 'row-resize',
|
||||
'n-resize': 'n-resize',
|
||||
'e-resize': 'e-resize',
|
||||
's-resize': 's-resize',
|
||||
'w-resize': 'w-resize',
|
||||
'ne-resize': 'ne-resize',
|
||||
'nw-resize': 'nw-resize',
|
||||
'se-resize': 'se-resize',
|
||||
'sw-resize': 'sw-resize',
|
||||
'ew-resize': 'ew-resize',
|
||||
'ns-resize': 'ns-resize',
|
||||
'nesw-resize': 'nesw-resize',
|
||||
'nwse-resize': 'nwse-resize',
|
||||
'zoom-in': 'zoom-in',
|
||||
'zoom-out': 'zoom-out',
|
||||
},
|
||||
divideColor: ({ theme }) => theme('borderColor'),
|
||||
divideOpacity: ({ theme }) => theme('borderOpacity'),
|
||||
divideWidth: ({ theme }) => theme('borderWidth'),
|
||||
dropShadow: {
|
||||
sm: '0 1px 1px rgb(0 0 0 / 0.05)',
|
||||
DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
|
||||
md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'],
|
||||
lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'],
|
||||
xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'],
|
||||
'2xl': '0 25px 25px rgb(0 0 0 / 0.15)',
|
||||
none: '0 0 #0000',
|
||||
},
|
||||
fill: ({ theme }) => ({
|
||||
none: 'none',
|
||||
...theme('colors'),
|
||||
}),
|
||||
flex: {
|
||||
1: '1 1 0%',
|
||||
auto: '1 1 auto',
|
||||
initial: '0 1 auto',
|
||||
none: 'none',
|
||||
},
|
||||
flexBasis: ({ theme }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
}),
|
||||
flexGrow: {
|
||||
0: '0',
|
||||
DEFAULT: '1',
|
||||
},
|
||||
flexShrink: {
|
||||
0: '0',
|
||||
DEFAULT: '1',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'ui-sans-serif',
|
||||
'system-ui',
|
||||
'-apple-system',
|
||||
'BlinkMacSystemFont',
|
||||
'"Segoe UI"',
|
||||
'Roboto',
|
||||
'"Helvetica Neue"',
|
||||
'Arial',
|
||||
'"Noto Sans"',
|
||||
'sans-serif',
|
||||
'"Apple Color Emoji"',
|
||||
'"Segoe UI Emoji"',
|
||||
'"Segoe UI Symbol"',
|
||||
'"Noto Color Emoji"',
|
||||
],
|
||||
serif: ['ui-serif', 'Georgia', 'Cambria', '"Times New Roman"', 'Times', 'serif'],
|
||||
mono: [
|
||||
'ui-monospace',
|
||||
'SFMono-Regular',
|
||||
'Menlo',
|
||||
'Monaco',
|
||||
'Consolas',
|
||||
'"Liberation Mono"',
|
||||
'"Courier New"',
|
||||
'monospace',
|
||||
],
|
||||
},
|
||||
fontSize: {
|
||||
xs: ['0.75rem', { lineHeight: '1rem' }],
|
||||
sm: ['0.875rem', { lineHeight: '1.25rem' }],
|
||||
base: ['1rem', { lineHeight: '1.5rem' }],
|
||||
lg: ['1.125rem', { lineHeight: '1.75rem' }],
|
||||
xl: ['1.25rem', { lineHeight: '1.75rem' }],
|
||||
'2xl': ['1.5rem', { lineHeight: '2rem' }],
|
||||
'3xl': ['1.875rem', { lineHeight: '2.25rem' }],
|
||||
'4xl': ['2.25rem', { lineHeight: '2.5rem' }],
|
||||
'5xl': ['3rem', { lineHeight: '1' }],
|
||||
'6xl': ['3.75rem', { lineHeight: '1' }],
|
||||
'7xl': ['4.5rem', { lineHeight: '1' }],
|
||||
'8xl': ['6rem', { lineHeight: '1' }],
|
||||
'9xl': ['8rem', { lineHeight: '1' }],
|
||||
},
|
||||
fontWeight: {
|
||||
thin: '100',
|
||||
extralight: '200',
|
||||
light: '300',
|
||||
normal: '400',
|
||||
medium: '500',
|
||||
semibold: '600',
|
||||
bold: '700',
|
||||
extrabold: '800',
|
||||
black: '900',
|
||||
},
|
||||
gap: ({ theme }) => theme('spacing'),
|
||||
gradientColorStops: ({ theme }) => theme('colors'),
|
||||
grayscale: {
|
||||
0: '0',
|
||||
DEFAULT: '100%',
|
||||
},
|
||||
gridAutoColumns: {
|
||||
auto: 'auto',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fr: 'minmax(0, 1fr)',
|
||||
},
|
||||
gridAutoRows: {
|
||||
auto: 'auto',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fr: 'minmax(0, 1fr)',
|
||||
},
|
||||
gridColumn: {
|
||||
auto: 'auto',
|
||||
'span-1': 'span 1 / span 1',
|
||||
'span-2': 'span 2 / span 2',
|
||||
'span-3': 'span 3 / span 3',
|
||||
'span-4': 'span 4 / span 4',
|
||||
'span-5': 'span 5 / span 5',
|
||||
'span-6': 'span 6 / span 6',
|
||||
'span-7': 'span 7 / span 7',
|
||||
'span-8': 'span 8 / span 8',
|
||||
'span-9': 'span 9 / span 9',
|
||||
'span-10': 'span 10 / span 10',
|
||||
'span-11': 'span 11 / span 11',
|
||||
'span-12': 'span 12 / span 12',
|
||||
'span-full': '1 / -1',
|
||||
},
|
||||
gridColumnEnd: {
|
||||
auto: 'auto',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
8: '8',
|
||||
9: '9',
|
||||
10: '10',
|
||||
11: '11',
|
||||
12: '12',
|
||||
13: '13',
|
||||
},
|
||||
gridColumnStart: {
|
||||
auto: 'auto',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
8: '8',
|
||||
9: '9',
|
||||
10: '10',
|
||||
11: '11',
|
||||
12: '12',
|
||||
13: '13',
|
||||
},
|
||||
gridRow: {
|
||||
auto: 'auto',
|
||||
'span-1': 'span 1 / span 1',
|
||||
'span-2': 'span 2 / span 2',
|
||||
'span-3': 'span 3 / span 3',
|
||||
'span-4': 'span 4 / span 4',
|
||||
'span-5': 'span 5 / span 5',
|
||||
'span-6': 'span 6 / span 6',
|
||||
'span-full': '1 / -1',
|
||||
},
|
||||
gridRowEnd: {
|
||||
auto: 'auto',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
},
|
||||
gridRowStart: {
|
||||
auto: 'auto',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
},
|
||||
gridTemplateColumns: {
|
||||
none: 'none',
|
||||
1: 'repeat(1, minmax(0, 1fr))',
|
||||
2: 'repeat(2, minmax(0, 1fr))',
|
||||
3: 'repeat(3, minmax(0, 1fr))',
|
||||
4: 'repeat(4, minmax(0, 1fr))',
|
||||
5: 'repeat(5, minmax(0, 1fr))',
|
||||
6: 'repeat(6, minmax(0, 1fr))',
|
||||
7: 'repeat(7, minmax(0, 1fr))',
|
||||
8: 'repeat(8, minmax(0, 1fr))',
|
||||
9: 'repeat(9, minmax(0, 1fr))',
|
||||
10: 'repeat(10, minmax(0, 1fr))',
|
||||
11: 'repeat(11, minmax(0, 1fr))',
|
||||
12: 'repeat(12, minmax(0, 1fr))',
|
||||
},
|
||||
gridTemplateRows: {
|
||||
none: 'none',
|
||||
1: 'repeat(1, minmax(0, 1fr))',
|
||||
2: 'repeat(2, minmax(0, 1fr))',
|
||||
3: 'repeat(3, minmax(0, 1fr))',
|
||||
4: 'repeat(4, minmax(0, 1fr))',
|
||||
5: 'repeat(5, minmax(0, 1fr))',
|
||||
6: 'repeat(6, minmax(0, 1fr))',
|
||||
},
|
||||
height: ({ theme }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
full: '100%',
|
||||
screen: '100vh',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
}),
|
||||
hueRotate: {
|
||||
0: '0deg',
|
||||
15: '15deg',
|
||||
30: '30deg',
|
||||
60: '60deg',
|
||||
90: '90deg',
|
||||
180: '180deg',
|
||||
},
|
||||
inset: ({ theme }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
full: '100%',
|
||||
}),
|
||||
invert: {
|
||||
0: '0',
|
||||
DEFAULT: '100%',
|
||||
},
|
||||
keyframes: {
|
||||
spin: {
|
||||
to: {
|
||||
transform: 'rotate(360deg)',
|
||||
},
|
||||
},
|
||||
ping: {
|
||||
'75%, 100%': {
|
||||
transform: 'scale(2)',
|
||||
opacity: '0',
|
||||
},
|
||||
},
|
||||
pulse: {
|
||||
'50%': {
|
||||
opacity: '.5',
|
||||
},
|
||||
},
|
||||
bounce: {
|
||||
'0%, 100%': {
|
||||
transform: 'translateY(-25%)',
|
||||
animationTimingFunction: 'cubic-bezier(0.8,0,1,1)',
|
||||
},
|
||||
'50%': {
|
||||
transform: 'none',
|
||||
animationTimingFunction: 'cubic-bezier(0,0,0.2,1)',
|
||||
},
|
||||
},
|
||||
},
|
||||
letterSpacing: {
|
||||
tighter: '-0.05em',
|
||||
tight: '-0.025em',
|
||||
normal: '0em',
|
||||
wide: '0.025em',
|
||||
wider: '0.05em',
|
||||
widest: '0.1em',
|
||||
},
|
||||
lineHeight: {
|
||||
none: '1',
|
||||
tight: '1.25',
|
||||
snug: '1.375',
|
||||
normal: '1.5',
|
||||
relaxed: '1.625',
|
||||
loose: '2',
|
||||
3: '.75rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
},
|
||||
listStyleType: {
|
||||
none: 'none',
|
||||
disc: 'disc',
|
||||
decimal: 'decimal',
|
||||
},
|
||||
margin: ({ theme }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
}),
|
||||
maxHeight: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
none: 'none',
|
||||
full: '100%',
|
||||
screen: '100vh',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
}),
|
||||
maxWidth: ({ theme, breakpoints }) => ({
|
||||
none: 'none',
|
||||
0: '0rem',
|
||||
xs: '20rem',
|
||||
sm: '24rem',
|
||||
md: '28rem',
|
||||
lg: '32rem',
|
||||
xl: '36rem',
|
||||
'2xl': '42rem',
|
||||
'3xl': '48rem',
|
||||
'4xl': '56rem',
|
||||
'5xl': '64rem',
|
||||
'6xl': '72rem',
|
||||
'7xl': '80rem',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
prose: '65ch',
|
||||
...breakpoints(theme('screens')),
|
||||
}),
|
||||
minHeight: {
|
||||
0: '0px',
|
||||
full: '100%',
|
||||
screen: '100vh',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
},
|
||||
minWidth: {
|
||||
0: '0px',
|
||||
full: '100%',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
},
|
||||
objectPosition: {
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
'left-bottom': 'left bottom',
|
||||
'left-top': 'left top',
|
||||
right: 'right',
|
||||
'right-bottom': 'right bottom',
|
||||
'right-top': 'right top',
|
||||
top: 'top',
|
||||
},
|
||||
opacity: {
|
||||
0: '0',
|
||||
5: '0.05',
|
||||
10: '0.1',
|
||||
20: '0.2',
|
||||
25: '0.25',
|
||||
30: '0.3',
|
||||
40: '0.4',
|
||||
50: '0.5',
|
||||
60: '0.6',
|
||||
70: '0.7',
|
||||
75: '0.75',
|
||||
80: '0.8',
|
||||
90: '0.9',
|
||||
95: '0.95',
|
||||
100: '1',
|
||||
},
|
||||
order: {
|
||||
first: '-9999',
|
||||
last: '9999',
|
||||
none: '0',
|
||||
1: '1',
|
||||
2: '2',
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
8: '8',
|
||||
9: '9',
|
||||
10: '10',
|
||||
11: '11',
|
||||
12: '12',
|
||||
},
|
||||
outlineColor: ({ theme }) => theme('colors'),
|
||||
outlineOffset: {
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
outlineWidth: {
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
padding: ({ theme }) => theme('spacing'),
|
||||
placeholderColor: ({ theme }) => theme('colors'),
|
||||
placeholderOpacity: ({ theme }) => theme('opacity'),
|
||||
ringColor: ({ theme }) => ({
|
||||
DEFAULT: theme('colors.blue.500', '#3b82f6'),
|
||||
...theme('colors'),
|
||||
}),
|
||||
ringOffsetColor: ({ theme }) => theme('colors'),
|
||||
ringOffsetWidth: {
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
ringOpacity: ({ theme }) => ({
|
||||
DEFAULT: '0.5',
|
||||
...theme('opacity'),
|
||||
}),
|
||||
ringWidth: {
|
||||
DEFAULT: '3px',
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
rotate: {
|
||||
0: '0deg',
|
||||
1: '1deg',
|
||||
2: '2deg',
|
||||
3: '3deg',
|
||||
6: '6deg',
|
||||
12: '12deg',
|
||||
45: '45deg',
|
||||
90: '90deg',
|
||||
180: '180deg',
|
||||
},
|
||||
saturate: {
|
||||
0: '0',
|
||||
50: '.5',
|
||||
100: '1',
|
||||
150: '1.5',
|
||||
200: '2',
|
||||
},
|
||||
scale: {
|
||||
0: '0',
|
||||
50: '.5',
|
||||
75: '.75',
|
||||
90: '.9',
|
||||
95: '.95',
|
||||
100: '1',
|
||||
105: '1.05',
|
||||
110: '1.1',
|
||||
125: '1.25',
|
||||
150: '1.5',
|
||||
},
|
||||
screens: {
|
||||
sm: '640px',
|
||||
md: '768px',
|
||||
lg: '1024px',
|
||||
xl: '1280px',
|
||||
'2xl': '1536px',
|
||||
},
|
||||
scrollMargin: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
}),
|
||||
scrollPadding: ({ theme }) => theme('spacing'),
|
||||
sepia: {
|
||||
0: '0',
|
||||
DEFAULT: '100%',
|
||||
},
|
||||
skew: {
|
||||
0: '0deg',
|
||||
1: '1deg',
|
||||
2: '2deg',
|
||||
3: '3deg',
|
||||
6: '6deg',
|
||||
12: '12deg',
|
||||
},
|
||||
space: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
}),
|
||||
spacing: {
|
||||
px: '1px',
|
||||
0: '0px',
|
||||
0.5: '0.125rem',
|
||||
1: '0.25rem',
|
||||
1.5: '0.375rem',
|
||||
2: '0.5rem',
|
||||
2.5: '0.625rem',
|
||||
3: '0.75rem',
|
||||
3.5: '0.875rem',
|
||||
4: '1rem',
|
||||
5: '1.25rem',
|
||||
6: '1.5rem',
|
||||
7: '1.75rem',
|
||||
8: '2rem',
|
||||
9: '2.25rem',
|
||||
10: '2.5rem',
|
||||
11: '2.75rem',
|
||||
12: '3rem',
|
||||
14: '3.5rem',
|
||||
16: '4rem',
|
||||
20: '5rem',
|
||||
24: '6rem',
|
||||
28: '7rem',
|
||||
32: '8rem',
|
||||
36: '9rem',
|
||||
40: '10rem',
|
||||
44: '11rem',
|
||||
48: '12rem',
|
||||
52: '13rem',
|
||||
56: '14rem',
|
||||
60: '15rem',
|
||||
64: '16rem',
|
||||
72: '18rem',
|
||||
80: '20rem',
|
||||
96: '24rem',
|
||||
},
|
||||
stroke: ({ theme }) => ({
|
||||
none: 'none',
|
||||
...theme('colors'),
|
||||
}),
|
||||
strokeWidth: {
|
||||
0: '0',
|
||||
1: '1',
|
||||
2: '2',
|
||||
},
|
||||
supports: {},
|
||||
data: {},
|
||||
textColor: ({ theme }) => theme('colors'),
|
||||
textDecorationColor: ({ theme }) => theme('colors'),
|
||||
textDecorationThickness: {
|
||||
auto: 'auto',
|
||||
'from-font': 'from-font',
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
textIndent: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
}),
|
||||
textOpacity: ({ theme }) => theme('opacity'),
|
||||
textUnderlineOffset: {
|
||||
auto: 'auto',
|
||||
0: '0px',
|
||||
1: '1px',
|
||||
2: '2px',
|
||||
4: '4px',
|
||||
8: '8px',
|
||||
},
|
||||
transformOrigin: {
|
||||
center: 'center',
|
||||
top: 'top',
|
||||
'top-right': 'top right',
|
||||
right: 'right',
|
||||
'bottom-right': 'bottom right',
|
||||
bottom: 'bottom',
|
||||
'bottom-left': 'bottom left',
|
||||
left: 'left',
|
||||
'top-left': 'top left',
|
||||
},
|
||||
transitionDelay: {
|
||||
75: '75ms',
|
||||
100: '100ms',
|
||||
150: '150ms',
|
||||
200: '200ms',
|
||||
300: '300ms',
|
||||
500: '500ms',
|
||||
700: '700ms',
|
||||
1000: '1000ms',
|
||||
},
|
||||
transitionDuration: {
|
||||
DEFAULT: '150ms',
|
||||
75: '75ms',
|
||||
100: '100ms',
|
||||
150: '150ms',
|
||||
200: '200ms',
|
||||
300: '300ms',
|
||||
500: '500ms',
|
||||
700: '700ms',
|
||||
1000: '1000ms',
|
||||
},
|
||||
transitionProperty: {
|
||||
none: 'none',
|
||||
all: 'all',
|
||||
DEFAULT:
|
||||
'color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter',
|
||||
colors: 'color, background-color, border-color, text-decoration-color, fill, stroke',
|
||||
opacity: 'opacity',
|
||||
shadow: 'box-shadow',
|
||||
transform: 'transform',
|
||||
},
|
||||
transitionTimingFunction: {
|
||||
DEFAULT: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
linear: 'linear',
|
||||
in: 'cubic-bezier(0.4, 0, 1, 1)',
|
||||
out: 'cubic-bezier(0, 0, 0.2, 1)',
|
||||
'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||
},
|
||||
translate: ({ theme }) => ({
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
full: '100%',
|
||||
}),
|
||||
width: ({ theme }) => ({
|
||||
auto: 'auto',
|
||||
...theme('spacing'),
|
||||
'1/2': '50%',
|
||||
'1/3': '33.333333%',
|
||||
'2/3': '66.666667%',
|
||||
'1/4': '25%',
|
||||
'2/4': '50%',
|
||||
'3/4': '75%',
|
||||
'1/5': '20%',
|
||||
'2/5': '40%',
|
||||
'3/5': '60%',
|
||||
'4/5': '80%',
|
||||
'1/6': '16.666667%',
|
||||
'2/6': '33.333333%',
|
||||
'3/6': '50%',
|
||||
'4/6': '66.666667%',
|
||||
'5/6': '83.333333%',
|
||||
'1/12': '8.333333%',
|
||||
'2/12': '16.666667%',
|
||||
'3/12': '25%',
|
||||
'4/12': '33.333333%',
|
||||
'5/12': '41.666667%',
|
||||
'6/12': '50%',
|
||||
'7/12': '58.333333%',
|
||||
'8/12': '66.666667%',
|
||||
'9/12': '75%',
|
||||
'10/12': '83.333333%',
|
||||
'11/12': '91.666667%',
|
||||
full: '100%',
|
||||
screen: '100vw',
|
||||
min: 'min-content',
|
||||
max: 'max-content',
|
||||
fit: 'fit-content',
|
||||
}),
|
||||
willChange: {
|
||||
auto: 'auto',
|
||||
scroll: 'scroll-position',
|
||||
contents: 'contents',
|
||||
transform: 'transform',
|
||||
},
|
||||
zIndex: {
|
||||
auto: 'auto',
|
||||
0: '0',
|
||||
10: '10',
|
||||
20: '20',
|
||||
30: '30',
|
||||
40: '40',
|
||||
50: '50',
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./node_modules/flowbite.{js,ts}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#843bd7',
|
||||
},
|
||||
fontFamily: {
|
||||
primary: ['Inter'],
|
||||
},
|
||||
},
|
||||
},
|
||||
daisyui: {
|
||||
// base: false,
|
||||
themes: [
|
||||
'light',
|
||||
'dark',
|
||||
'cupcake',
|
||||
'bumblebee',
|
||||
'emerald',
|
||||
'corporate',
|
||||
'synthwave',
|
||||
'retro',
|
||||
'cyberpunk',
|
||||
'valentine',
|
||||
'halloween',
|
||||
'garden',
|
||||
'forest',
|
||||
'aqua',
|
||||
'lofi',
|
||||
'pastel',
|
||||
'fantasy',
|
||||
'wireframe',
|
||||
'black',
|
||||
'luxury',
|
||||
'dracula',
|
||||
'cmyk',
|
||||
'autumn',
|
||||
'business',
|
||||
'acid',
|
||||
'lemonade',
|
||||
'night',
|
||||
'coffee',
|
||||
'winter',
|
||||
],
|
||||
|
||||
},
|
||||
plugins: [
|
||||
'@tailwindcss/forms',
|
||||
'@tailwindcss/container-queries',
|
||||
require('@tailwindcss/typography'),
|
||||
require('daisyui'),
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"extends": "./.nuxt/tsconfig.json"
|
||||
}
|
||||
Loading…
Reference in New Issue