TailwindCSS Configuration

Copy and paste everything you need in your next project. Preferably, colors are copied as a whole to guarantee compatibility with figma design prototypes. The colors are optimized to work with shadcn.

Installation

1. Install packages

1pnpm i @deckweiss/tailwindcss-config
2pnpm i -D postcss-import

2. Update tailwind.config

1import { colors } from '@deckweiss/tailwindcss-config';
2
3export default {
4    theme: {
5        extend: {
6            colors
7        }
8    }
9}
10 

2. Update postcss.config.js

1// /postcss.config.js
2module.exports = {
3    plugins: {
4        "postcss-import": {}
5    }
6}

3. Replace TailwindCSS statements

1/* root css file */
2@import "tailwindcss/base"; /* used to be `@tailwind base;` */
3@import "tailwindcss/components"; /* used to be `@tailwind components;` */
4@import "tailwindcss/utilities"; /* used to be `@tailwind utilities;` */
5
6@import "@deckweiss/tailwindcss-config/variables";

Contribution

Please create a tag for every substantial change to keep track of compatibility.