@lform/lwind

Lwind - Lform Tailwind Setup

The Lwind frontend styling system is designed to use as many Tailwind default-approaches as possible while also allowing for the flexibility required to implement designs produced using the Lform design system.

• Requires Tailwind 3.4.0+

Resources

• Tailwind Documentation

• PostCSS Plugins - No longer used directly, all plugins from this package have been included in this package as the PostCSS package is no longer updated, it was just a wrapper for those packages.

• TailWind UI KIts - For reference for building components

Building

• npm run dev - Builds development version of tailwind file
• npm run watch - Builds development version of tailwind file and watches files
• npm run prod - Builds development version of tailwind file

PostCSS Plugins

The following PostCSS plugins are used by default:

• postcss-import - Used to import other PCSS files
• autoprefixer - Autoprefixes CSS for browser compatibility
• postcss-advanced-variables - Used to define SCSS-style variables in PCSS with more advanced functionality than CSS variables
• postcss-atroot - Used to add @at-root functionality to PCSS, bubbling nested styling up to the root-level selectors.
• postcss-extend-rule - Used to add SCSS-style @extend functionality to PCSS, allowing for the extension of existing classes.
• tailwindcss/nesting - Wraps postcss-nested and acts as a compatibility layer to make sure your nesting plugin of choice properly understands custom syntax like @apply and @screen.

Recommend Plugins

The following PostCSS plugins are recommend depending on your needs:

• postcss-rem - Used to convert pixel values to rem, adds a rem-convert() function that can be invoked in PCSS. px must be specified, or it will not function, eg width: rem-convert(100px).

PostCSS Imports & Overriding Lwind

You can override the Lwind CSS by adding a file with the same path & filename in the project's PCSS directory and adjusting the @import statement in the main.pcss file.

Tailwind Config

Tailwind Plugins

• @tailwindcss/forms - Used to provide default baseline form styling

Breakpoints

The default breakpoints included in Tailwind are used.

Spacing / Gaps

• Designs are implemented using a base spacing sizing of 8 pixels.
• This is Tailwind's default spacing system, refer to the documentation as necessary.

Colors

• Main colors are named following a primary, secondary, tertiary logic for the main brand colors.

  • Each has a light and dark (up-shade / down-shade) version
  • Each has a fg version for the color to use for foreground text on a background with this color, eg buttons

• Secondary colors are added as numeric values to the accents list, eg accent-1. This allows for as many accents to be added as necessary to accommodate a design.

• Greys are labeled using Tailwind's numbering system, 100, 300, 500, 700, 900 are included by default.

• Black & whites are defined in the black and white keys, as well as their transparent versions equivalents white-transparent and black-transparent

• Feedback colors from forms / interactions are specified in the success, warning, and error colors

• Social media brand colors are defined in the social keys

Typography

Fonts available

There are 3 types of fonts in Lwind:

• font-body - The body font used on the site by default
• font-header - The main header font
• font-subheader - Usually used for small text items in a utility context, eg blog post dates

Font scaling

The font-scaling system uses Modular Scale instead of Tailwind's default

• Base is 16px with 1.125x scaling

• The scale included with Lwind goes from -3 to 12

• Below are the scales, or you refer to the font scale reference for the full list:

  • -text-ms-3 = 11px
  • -text-ms-2 = 12px
  • -text-ms-1 = 14px
  • text-ms-0 = 16px
  • text-ms-1 = 18px
  • text-ms-2 = 20px
  • text-ms-3 = 22px
  • text-ms-4 = 25px
  • text-ms-5 = 28px
  • text-ms-6 = 32px
  • text-ms-7 = 36px
  • text-ms-8 = 41px
  • text-ms-9 = 46px
  • text-ms-10 = 51px
  • text-ms-11 = 58px
  • text-ms-12 = 65px
  • text-ms-13 = 73px

Header and subheader utility classes

Modular scale header utility classes have been included that include the header font with a default line-height of 1.2. Headers with default line-heights will appear too spaced out between the lines, especially at larger font sizes.

Header Classes

• -h-ms-3 = 11px
• -h-ms-2 = 12px
• -h-ms-1 = 14px
• h-ms = 16px
• h-ms-1 = 18px
• h-ms-2 = 20px
• h-ms-3 = 22px
• h-ms-4 = 25px
• h-ms-5 = 28px
• h-ms-6 = 32px
• h-ms-7 = 36px
• h-ms-8 = 41px
• h-ms-9 = 46px
• h-ms-10 = 51px
• h-ms-11 = 58px
• h-ms-12 = 65px
• h-ms-13 = 73px

Subheader Classes

Subheaders are generally smaller in size, their available classes are as follows:

• -sh-ms-3 = 11px
• -sh-ms-2 = 12px
• -sh-ms-1 = 14px
• sh-ms = 16px
• sh-ms-1 = 18px
• sh-ms-2 = 20px

Header Line Heights

By default, headers are set to 1.25 line-height as larger fonts can appear overly spaced out vertically. To override this, extend lineHeight with a header value in the Tailwind config file.

Richtext

A custom rich-text implementation is used for all rich-text areas by adding a rich-text class to any area with rich text. The rich text settings can be found in the tailwind config file.

Tailwind Utilities & Components

Buttons

Button classes are baked into Lwind and can be invoked with the following options. Buttons use the baseclass and modifier syntax.

Colors

• button - The default button, uses the primary color as its background and primary-fg as the text color
• button-secondary - The secondary color button, uses the secondary color as its background and secondary-fg as the text color
• button-tertiary - The tertiary color button, uses the tertiary color as its background and tertiary-fg as the text color

Sizing

• button-xs
• button-sm
• button - Default size
• button-lg
• button-xl

Examples

• Default button, small: .button .button-sm
• Secondary color button, large: .button .button-secondary .button-sm

Containers

Tailwind's default containers are disabled in favor of a fluid container system. There are five container sizes that match the default breakpoint sizes.

• Containers are auto-centered with margin-left & margin-right set to auto.
• They also have a default padding of 1.5rem.
• Container widths & padding can be configured in the Tailwind config under the containers section
• If a class of px-0 is added to a container, the padding will be disabled
• If a class of mx-0 is added to a container, the auto-centering margin will be disabled.

Classes & Default Sizes

• container - Max of 1536px
• container-2xl - Max of 1536px
• container-xl - Max of 1280px
• container-lg - Max of 1024px
• container-md - Max of 768px
• container-sm - Max of 640px

Flex Grid

CSS Grid has a limitation in that it does not support centering columns or aligning them outside of the grid structure. This issue is addressed by using a Flex-based grid, which creates a full-width grid with a specified number of columns. In a Flex Grid, any remaining columns at the bottom can be centered effectively.

• Use the class flex-grid to implement a flex grid.
• Flex Grid defaults to a single column. To change this, use flex-grid-cols-{n}, replacing {n} with the desired number of columns (1 to 10).
• Adjust horizontal spacing between Flex Grid items with flex-grid-gap-{n}, using any number from the Tailwind default spacing scale. The maximum gap is 12 (48px). For larger gaps, add custom classes.
• Flex Grid is fully responsive. Use sm:, md:, and lg: prefixes with flex-grid-cols-{n} or flex-grid-gap-{n} for responsive layouts.
• For vertical spacing, use Tailwind's native gap-y-{n} since Flex Grid, powered by Flexbox, does not add vertical spacing by default.
• IMPORTANT: Avoid using margin-left or margin-right on elements with flex-grid, as it disrupts the grid layout. Instead, apply margins to a container element.

Classes & Sizing

Base Class

• flex-grid

Column Classes

• flex-grid-cols-1
• flex-grid-cols-2
• flex-grid-cols-3
• flex-grid-cols-4
• flex-grid-cols-5
• flex-grid-cols-6
• flex-grid-cols-7
• flex-grid-cols-8
• flex-grid-cols-9
• flex-grid-cols-10

Gap Classes

• flex-grid-gap-0.5 = 2px
• flex-grid-gap-1 = 4px
• flex-grid-gap-1.5 = 6px
• flex-grid-gap-2 = 8px
• flex-grid-gap-2.5 = 10px
• flex-grid-gap-3 = 12px
• flex-grid-gap-3.5 = 14px
• flex-grid-gap-4 = 16px
• flex-grid-gap-5 = 20px
• flex-grid-gap-6 = 24px
• flex-grid-gap-7 = 28px
• flex-grid-gap-8 = 32px
• flex-grid-gap-9 = 36px
• flex-grid-gap-10 = 40px
• flex-grid-gap-11 = 44px
• flex-grid-gap-12 = 48px

Example Usage

<div class="flex-grid flex-grid-cols-2 md:flex-grid-cols-3 flex-grid-gap-2">
    <!-- A 3 column flex grid with an 8 pixel gap, 2 columns on tablet -->
</div>