mirror of
https://github.com/catppuccin/tailwindcss.git
synced 2026-01-09 05:01:09 +08:00
style: reformat examples with prettier
This commit is contained in:
winston
parent
8e7e8ebdf1
commit
3587028def
@ -1,6 +1,6 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = nextConfig
|
||||
module.exports = nextConfig;
|
||||
|
||||
11748
examples/next/package-lock.json
generated
11748
examples/next/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,25 +1,25 @@
|
||||
{
|
||||
"name": "ctp-next",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "12.1.6",
|
||||
"react": "18.1.0",
|
||||
"react-dom": "18.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "file:../..",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "8.16.0",
|
||||
"eslint-config-next": "12.1.6",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.0.24"
|
||||
}
|
||||
"name": "ctp-next",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "12.1.6",
|
||||
"react": "18.1.0",
|
||||
"react-dom": "18.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "file:../..",
|
||||
"@tailwindcss/forms": "^0.5.2",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"eslint": "8.16.0",
|
||||
"eslint-config-next": "12.1.6",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.0.24"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import '../styles/globals.css'
|
||||
import "../styles/globals.css";
|
||||
|
||||
function MyApp({ Component, pageProps }) {
|
||||
return <Component {...pageProps} />
|
||||
return <Component {...pageProps} />;
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
export default MyApp;
|
||||
|
||||
@ -2,57 +2,55 @@ import Head from "next/head";
|
||||
import { variants } from "@catppuccin/palette";
|
||||
|
||||
export default function Home() {
|
||||
const changeColorscheme = (e) => {
|
||||
document.body.classList = e.target.value.toLowerCase();
|
||||
};
|
||||
const changeColorscheme = (e) => {
|
||||
document.body.classList = e.target.value.toLowerCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Catppuccin + TailwindCSS!</title>
|
||||
</Head>
|
||||
<div className="container max-w-lg mx-auto transition-colors space-y-2">
|
||||
<div className="space-y-2 text-center pt-8">
|
||||
<img
|
||||
className="mx-auto"
|
||||
src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png"
|
||||
width="100"
|
||||
alt="Logo"
|
||||
/>
|
||||
<h1>Catppuccin for Tailwind CSS</h1>
|
||||
<span className="mocha macchiato frappe latte"></span>
|
||||
<div className="flex max-w-fit border rounded border-overlay0 items-center mx-auto">
|
||||
<span className="rounded-l whitespace-nowrap px-2">
|
||||
Current flavour:
|
||||
</span>
|
||||
<select
|
||||
className="focus:rounded-r focus:ring-pink focus:border-pink bg-overlay0 w-full p-1 text-text"
|
||||
name="colorscheme"
|
||||
onChange={changeColorscheme}
|
||||
>
|
||||
<option>Mocha</option>
|
||||
<option>Macchiato</option>
|
||||
<option>Frappe</option>
|
||||
<option>Latte</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.keys(variants.mocha).map((key) => (
|
||||
<div
|
||||
className={
|
||||
"flex items-center shadow-md rounded justify-center h-24 w-24" +
|
||||
(" bg-" + key)
|
||||
}
|
||||
key={key}
|
||||
>
|
||||
<span className="bg-base/20 text-text rounded-lg p-1">
|
||||
{key}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Catppuccin + TailwindCSS!</title>
|
||||
</Head>
|
||||
<div className="container max-w-lg mx-auto transition-colors space-y-2">
|
||||
<div className="space-y-2 text-center pt-8">
|
||||
<img
|
||||
className="mx-auto"
|
||||
src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png"
|
||||
width="100"
|
||||
alt="Logo"
|
||||
/>
|
||||
<h1>Catppuccin for Tailwind CSS</h1>
|
||||
<span className="mocha macchiato frappe latte"></span>
|
||||
<div className="flex max-w-fit border rounded border-overlay0 items-center mx-auto">
|
||||
<span className="rounded-l whitespace-nowrap px-2">
|
||||
Current flavour:
|
||||
</span>
|
||||
<select
|
||||
className="focus:rounded-r focus:ring-pink focus:border-pink bg-overlay0 w-full p-1 text-text"
|
||||
name="colorscheme"
|
||||
onChange={changeColorscheme}
|
||||
>
|
||||
<option>Mocha</option>
|
||||
<option>Macchiato</option>
|
||||
<option>Frappe</option>
|
||||
<option>Latte</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{Object.keys(variants.mocha).map((key) => (
|
||||
<div
|
||||
className={
|
||||
"flex items-center shadow-md rounded justify-center h-24 w-24" +
|
||||
(" bg-" + key)
|
||||
}
|
||||
key={key}
|
||||
>
|
||||
<span className="bg-base/20 text-text rounded-lg p-1">{key}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,4 +3,4 @@ module.exports = {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,11 +3,11 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
html,
|
||||
body,
|
||||
body > div:first-child,
|
||||
div#__next,
|
||||
div#__next > div {
|
||||
@apply h-full bg-base text-text;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
body > div:first-child,
|
||||
div#__next,
|
||||
div#__next > div {
|
||||
@apply h-full bg-base text-text;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,20 +1,20 @@
|
||||
module.exports = {
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {},
|
||||
safelist: [
|
||||
// this is for demonstration purposes only, not required for basic usage
|
||||
{
|
||||
pattern: /bg-.+/,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
require("@tailwindcss/forms"),
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: false,
|
||||
defaultFlavour: "mocha",
|
||||
}),
|
||||
],
|
||||
content: [
|
||||
"./pages/**/*.{js,ts,jsx,tsx}",
|
||||
"./components/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {},
|
||||
safelist: [
|
||||
// this is for demonstration purposes only, not required for basic usage
|
||||
{
|
||||
pattern: /bg-.+/,
|
||||
},
|
||||
],
|
||||
plugins: [
|
||||
require("@tailwindcss/forms"),
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: false,
|
||||
defaultFlavour: "mocha",
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
||||
@ -3,14 +3,14 @@ import preprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@ -1,24 +1,24 @@
|
||||
{
|
||||
"name": "catppuccin-showcase",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "file:../..",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.1.3",
|
||||
"vite": "^2.9.9"
|
||||
}
|
||||
"name": "catppuccin-showcase",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.0.0",
|
||||
"react-dom": "^18.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@catppuccin/tailwindcss": "file:../..",
|
||||
"@types/react": "^18.0.0",
|
||||
"@types/react-dom": "^18.0.0",
|
||||
"@vitejs/plugin-react": "^1.3.0",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"postcss": "^8.4.14",
|
||||
"tailwindcss": "^3.1.3",
|
||||
"vite": "^2.9.9"
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,4 +3,4 @@ module.exports = {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
};
|
||||
|
||||
@ -10,9 +10,7 @@ function App() {
|
||||
};
|
||||
return (
|
||||
<div className={`App min-h-screen grid ${theme}`}>
|
||||
<main
|
||||
className="flex flex-col justify-center items-center bg-gradient-to-b from-ctp-base to-ctp-crust p-6"
|
||||
>
|
||||
<main className="flex flex-col justify-center items-center bg-gradient-to-b from-ctp-base to-ctp-crust p-6">
|
||||
<div className="flex mb-6 px-4 py-2 rounded-xl text-ctp-text">
|
||||
<button
|
||||
onClick={() => {
|
||||
|
||||
@ -26,4 +26,4 @@ export const Catppuccin = () => {
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import App from './App'
|
||||
import './styles/index.css'
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
import App from "./App";
|
||||
import "./styles/index.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
ReactDOM.createRoot(document.getElementById("root")).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
)
|
||||
);
|
||||
|
||||
@ -23,7 +23,7 @@ Lots of classes hidden here to showcase the catppuccin color classes
|
||||
}
|
||||
|
||||
#card button {
|
||||
@apply text-ctp-base px-4 py-2 rounded-xl font-bold text-xl transition duration-300 ease-in-out ;
|
||||
@apply text-ctp-base px-4 py-2 rounded-xl font-bold text-xl transition duration-300 ease-in-out;
|
||||
}
|
||||
|
||||
#palette {
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: "ctp",
|
||||
defaultFlavour: "latte",
|
||||
}),
|
||||
],
|
||||
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
require("@catppuccin/tailwindcss")({
|
||||
prefix: "ctp",
|
||||
defaultFlavour: "latte",
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
@ -3,6 +3,6 @@ import react from "@vitejs/plugin-react";
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
base: "/",
|
||||
plugins: [react()],
|
||||
base: "/",
|
||||
plugins: [react()],
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user