config/tailwind.config.js in shadcn-ui-0.0.2 vs config/tailwind.config.js in shadcn-ui-0.0.3
- old
+ new
@@ -1,86 +1,25 @@
-const defaultTheme = require("tailwindcss/defaultTheme");
+const shadcnConfig = require("./shadcn.tailwind.js");
module.exports = {
- darkMode: ["class"],
- content: [
- "./public/*.html",
- "./app/helpers/**/*.rb",
- "./app/javascript/**/*.js",
- "./app/views/**/*.{erb,haml,html,slim}",
- ],
+ ...shadcnConfig,
theme: {
- container: {
- center: true,
- padding: "2rem",
- screens: {
- "2xl": "1400px",
- },
- },
extend: {
colors: {
- border: "hsl(var(--border))",
- input: "hsl(var(--input))",
- ring: "hsl(var(--ring))",
- background: "hsl(var(--background))",
- foreground: "hsl(var(--foreground))",
- primary: {
- DEFAULT: "hsl(var(--primary))",
- foreground: "hsl(var(--primary-foreground))",
+ ...shadcnConfig.theme.extend.colors,
+ pink: "hsl(var(--pink))",
+ success: {
+ DEFAULT: "hsl(var(--success))",
+ foreground: "hsl(var(--success-foreground))",
},
- secondary: {
- DEFAULT: "hsl(var(--secondary))",
- foreground: "hsl(var(--secondary-foreground))",
+ info: {
+ DEFAULT: "hsl(var(--info))",
+ foreground: "hsl(var(--info-foreground))",
},
- destructive: {
- DEFAULT: "hsl(var(--destructive))",
- foreground: "hsl(var(--destructive-foreground))",
+ attention: {
+ DEFAULT: "hsl(var(--attention))",
+ foreground: "hsl(var(--attention-foreground))",
},
- muted: {
- DEFAULT: "hsl(var(--muted))",
- foreground: "hsl(var(--muted-foreground))",
- },
- accent: {
- DEFAULT: "hsl(var(--accent))",
- foreground: "hsl(var(--accent-foreground))",
- },
- popover: {
- DEFAULT: "hsl(var(--popover))",
- foreground: "hsl(var(--popover-foreground))",
- },
- card: {
- DEFAULT: "hsl(var(--card))",
- foreground: "hsl(var(--card-foreground))",
- },
},
- borderRadius: {
- lg: `var(--radius)`,
- md: `calc(var(--radius) - 2px)`,
- sm: "calc(var(--radius) - 4px)",
- },
- fontFamily: {
- sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
- },
- keyframes: {
- "accordion-down": {
- from: { height: 0 },
- to: { height: "var(--radix-accordion-content-height)" },
- },
- "accordion-up": {
- from: { height: "var(--radix-accordion-content-height)" },
- to: { height: 0 },
- },
- },
- animation: {
- "accordion-down": "accordion-down 0.2s ease-out",
- "accordion-up": "accordion-up 0.2s ease-out",
- },
},
},
- plugins: [
- require("@tailwindcss/forms"),
- require("@tailwindcss/aspect-ratio"),
- require("@tailwindcss/typography"),
- require("@tailwindcss/container-queries"),
- require("tailwindcss-animate"),
- ],
};