Tailwind CSS

Lightna uses Tailwind CSS as its main styling framework. Tailwind CSS is a utility-first framework that provides ready-to-use classes, making it easy to create custom designs without writing extra CSS.
In Lightna modules, custom CSS classes are used in templates so there is no need to overwrite a template just for style changes. However, you can use Tailwind CSS classes directly to keep your CSS files smaller.

Configuration

Tailwind CSS is configured in the tailwind.yaml file, located in the module’s root folder. This file allows you to customize the theme, add new settings, and extend configurations from other modules.

entry:
  common:
    content: ...
      common-template: vendor/module/template/*.phtml
      common-layout: vendor/module/layout/**/*.yaml
      common-js: vendor/module/js/common/*.js 
    import: ...
      tailwind-base: tailwindcss/base
      tailwind-components: tailwindcss/components
      tailwind-utilities: tailwindcss/utilities
      # Base
      base-animation: vendor/module/base/animation.css
      base-buttons: vendor/module/base/buttons.css
      # Components
      component-collapsible: vendor/module/component/collapsible.css
      component-dropdown: vendor/module/component/dropdown.css 
  product:
    content: ...
      product-template: vendor/module/template/product/**/*.phtml
      product-layout: vendor/module/layout/product.yaml
      product-js: vendor/module/js/product/**/*.js 
    import: ...
      tailwind-components: tailwindcss/components
      tailwind-utilities: tailwindcss/utilities
      # Base
      base-buttons: vendor/module/base/buttons.css 
tailwind:
  theme:
    fontFamily: ...
      sans: [ Assistant, sans-serif ] 
    extend:
      colors: ...
        primary:
          main: '#222222'
          alt: '#997E49'
        hover:
          main: '#3B3B3B' 

The config file has two main keys: entry and tailwind.

Entry Key

The entry key defines module entry points. Each entry point creates a separate CSS file. This helps include different styles on different pages.

Each entry point can have content and/or import sections.
In content, specify paths to templates, JavaScript files, layouts, and other sources containing Tailwind class names.
In import, list CSS files to be included in the build.

Tailwind Key

The tailwind key defines theme settings, following the same structure as Tailwind’s default configuration file.

Including Styles

To include a CSS file, add a block in the layout file that references the template where it is used.

.head:
  .link:
    .styles-common:
      template: lightna/magento-frontend/page/head/link/style/common.phtml

In the template file, use the asset method of the Url class to specify the file path. The file name matches the entry point from tailwind.yaml.
For example, if the entry point is common, the file will be common.css and located at build/style/common.css.

<?php
/**
 * Import:
 * @var Lightna\Engine\Data\Url $url
 */
?>
<link rel="stylesheet" type="text/css" media="all" href="<?= $url->asset('build/style/common.css') ?>">