Tailwind CSS Config

This package provides the default Tailwind CSS configuration used in the Loja Integrada projects.

Usage

Installation

Install the package using your package manager:

npm install @loja-integrada/tailwindcss-config
yarn add @loja-integrada/tailwindcss-config
pnpm add @loja-integrada/tailwindcss-config

And required packages:

npm install
yarn add tailwindcss postcss autoprefixer
pnpm add tailwindcss postcss autoprefixer

Configure

Create a tailwind.config.js file in the root of your project:

import defaultPreset from '@loja-integrada/tailwindcss-config'
import type { Config } from 'tailwindcss'

const config: Pick<Config, 'presets' | 'content' | 'theme'> = {
  presets: [defaultPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@loja-integrada/admin-components/dist/*.*'],
}
export default config

And postcss.config.js file in the root of your project:

/** @type {import("postcss-load-config").Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

export default config

Import the CSS file in your project default CSS file (like globals.scss):

@import '@loja-integrada/tailwindcss-config/style.scss';