Tailwind Config

[joshuapease]

• Copies Tailwind JSON to appropriate spot.
  • Will do in #7

[maxfenton]

Do we have a vite.php and craft-vite plugin in this?

Parallel development on the Ad Council craft-starter has these:

tailwind.config.mjs

// const defaultTheme = require("tailwindcss/defaultTheme");

module.exports = {
  content: [
    "./templates/**/*.twig",
    "./src/js/**/*.js"
  ],
  theme: {
    extend: {},
  },
}

vite.config.js

import ViteRestart from "vite-plugin-restart";
import ViteHmrPublicCopy from "vite-plugin-hmr-public-copy"; // Note: this is not yet updated for Vite 5
// See: https://github.com/davidwebca/vite-plugin-hmr-public-copy/pull/2

export default ({command}) => ({
  base: command === 'serve' ? '' : '/dist/',
  build: {
    manifest: true,
    outDir: './web/dist/',
    rollupOptions: {
      input: {
        app: './src/js/app.js',
        css: './src/css/app.css'
      },
      output: {
        sourcemap: false
      }
    }
  },
  plugins: [
    ViteRestart({
      reload: [
        './templates/**/*'
      ]
    }),
    ViteHmrPublicCopy({
      copy: true,
      copyAtStart: true
    }),
  ],
  publicDir: 'src/public',
  server: {
    fs: {
      strict: false
    },
    host: '0.0.0.0',
    origin: 'http://localhost:3000',
    port: 3000,
    strictPort: true,
  }
});

postcss.config.mjs

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 16,
      unitPrecision: 5,
      propList: [
        'font', 'font-size', 'line-height', 'letter-spacing',
        'border*',
        'background*',
        'grid*',
        'top', 'left', 'bottom', 'right', 'inset',
        'width', 'height',
        'margin*', 'padding*', 'max-*', 'min-*', 'gap*'
      ],
      selectorBlackList: [],
      replace: true,
      mediaQuery: true,
      minPixelValue: 0,
      exclude: /node_modules/i
    }, // Converts units to rems (defaults to only font properties @ 16px base size)
    ...(process.env.NODE_ENV === 'production' ? {cssnano: {}} : {})
  },
}

config/vite.php

<?php

use craft\helpers\App;

$host = Craft::$app->getRequest()->getIsConsoleRequest() === false
    ? Craft::$app->getRequest()->getHostInfo()
    : App::env('PRIMARY_SITE_URL');

$isHttps = parse_url($host)['scheme'] === 'https';
$httpPort = '3000'; // Note: changing this to 3001 results in unstyled contents
$httpsPort = '3000'; // Note: changing this to 3001 causes `ERR_SSL_PROTOCOL_ERROR`

return [
    'useDevServer' => App::env('ENVIRONMENT') === 'dev' || App::env('CRAFT_ENVIRONMENT') === 'dev',
    'manifestPath' => '@webroot/dist/manifest.json',
    'devServerPublic' => $host . ':' . ($isHttps ? $httpsPort : $httpPort),
    'serverPublic' => '/dist/', // App::env('PRIMARY_SITE_URL') . '/dist/' can conflict with multisite
    'errorEntry' => '',
    'cacheKeySuffix' => '',
    'devServerInternal' => "http://localhost:{$httpPort}",
    'checkDevServer' => true,
    'includeReactRefreshShim' => false,
    'includeModulePreloadShim' => false,
];

config/blitz.php

<?php
/**
 * @copyright Copyright (c) PutYourLightsOn
 */

/**
 * Blitz config.php
 *
 * v4 reference:
 * https://github.com/putyourlightson/craft-blitz/blob/v4/src/config.php
 */

use craft\helpers\App;

return [
    '*' => [
        'debug' => false,

        // Cache if devMode is not enabled
        'cachingEnabled' => !App::devMode(),

        // Automatically expire cache entries when elements are updated in Craft
        'clearCacheAutomatically' => true,

        // Determines when and how the cache should be refreshed.
        // - `0`: Expire the cache, regenerate manually
        // - `1`: Clear the cache, regenerate manually or organically
        // - `2`: Expire the cache and regenerate in a queue job
        // - `3`: Clear the cache and regenerate in a queue job
        'refreshMode' => 1, // 1 or 3 work best, depending on the size of the site

        // Does the site have a search page?
        // Do not cache URLs with query strings
        // Alternatively: set this to `1` and exclude the search results page from `includedUriPatterns`
        'queryStringCaching' => 0,

        // Cache all pages by default
        'includedUriPatterns' => [
            [
                'siteId' => '',
                'uriPattern' => '.*',
            ],
        ],

        // Hide hints by default
        'hintsEnabled' => false,

        // Append "cached on" comment only
        // Note: Cloudflare optimization removes HTML comments
        'outputComments' => 2,
        'sendPoweredByHeader' => true,

        // Default to FileStorage
        'cacheStorageType' => 'putyourlightson\blitz\drivers\storage\FileStorage',

        // Set the default `cacheGeneratorType` for public sites without htaccess auth:
        'cacheGeneratorType' => 'putyourlightson\blitz\drivers\generators\HttpGenerator',

        // Does the site have SEOmatic?
        'integrations' => [
            'putyourlightson\blitz\drivers\integrations\SeomaticIntegration',
        ],
    ],
    'dev' => [
        // Change to true to cache locally to `storage/cache/blitz`
        // 'cachingEnabled' => false,
        'debug' => true,

        'hintsEnabled' => true,

        // `cacheGeneratorType` for local site that cannot be accessed publicly
        'cacheGeneratorType' => 'putyourlightson\blitz\drivers\generators\LocalGenerator',

        // Optional additional control and testing
        //  'cacheStorageSettings' => [
        //      'folderPath' => '@storage/cache/blitz',
        //      'compressCachedValues' => false,
        //      'countCachedFiles' => true,
        //  ],
    ],
    'staging' => [
        'debug' => true,

        // Does the site have htaccess auth?
        // 'cacheGeneratorType' => 'putyourlightson\blitz\drivers\generators\LocalGenerator', // Because site cannot be accessed publicly
    ],
    'production' => [
        // Does the site have htaccess auth?
        // 'cacheGeneratorType' => 'putyourlightson\blitz\drivers\generators\LocalGenerator', // Because site cannot be accessed publicly
    ],
];