Tailwind config

A custom Tailwind CSS configuration that simply replaces default breakpoints and adds easings.

Installation

Install the package:

npm install --save-dev @studiometa/tailwind-config

Add the configuration in your main css file after the import of Tailwind:

@import 'tailwindcss';
+@import '@studiometa/tailwind-config';

For more information about the installation and configuration of Tailwind, read the official documentation.

Usage

Custom breakpoints

• xs: 30rem (480px) — Custom addition
• s: 40rem (640px) — Same as Tailwind's sm
• m: 48rem (768px) — Same as Tailwind's md
• l: 64rem (1024px) — Same as Tailwind's lg
• xl: 80rem (1280px) — Same as Tailwind's xl
• 2xl: 96rem (1536px) — Same as Tailwind's 2xl
• 3xl: 120rem (1920px) — Custom addition

File structure

We recommend using different folders to add your custom styles, utilities and variants.

Example structure and app.css:

bases/
├─ global.css
components/
├─ btn.css
utilities/
├─ inline-richtext.css
├─ richtext.css
variants/
├─ scroll-status.css
app.css

/* External import */
@import url('https://fonts.cdnfonts.com/css/satoshi');

/* Tailwind and config */
@import 'tailwindcss';
@import '@studiometa/tailwind-config';

/* Theme */
@theme {
  --color-primary: red;
  --font-sans: 'Satoshi', sans-serif;
}

/* Base */
@import './bases/global.css';

/* Components */
@import './components/btn.css';

/* Utilities */
@import './utilities/inline-richtext.css';
@import './utilities/richtext.css';

/* Variants */
@import './variants/scroll-status.css';

You can also divide your theme vars in separate files.

Migration from Tailwind v3

Coming from the old tailwind.config.js files ? Check out our upgrade guide.

Contributing

This project uses Git Flow as a branching model.

You can test the compilation using the following commands:

# Start the dev server for the test's assets
$ npm run test:dev

# Build the test's assets
$ npm run test:build