[#2] Tailwind and PostCSS

[joshuapease]

Overview

• Tailwind Config #2

Adds an empty Tailwind config and a standard PostCSS config.

Also including postcss-pxtorem per @maxfenton's recommendation.

It seems especially useful for arbitrary TW values (such as m-[20px])

How to test

Create a directory for your new Craft project

mkdir my-craft-project

# Then move into your directory
cd my-craft-project

Run the following composer create-project command.

It uses this branch as the starter project.

docker run --rm -it -v "$PWD":/app -v ${COMPOSER_HOME:-$HOME/.composer}:/tmp composer create-project viget/craft-site-starter=dev-jp/vite-setup ./ --ignore-platform-reqs

After completing the setup steps (it prompts for your project's name), run the following commands.

👇 These will gradually become more automated as this project progresses.

# Start DDEV
ddev start

# Install Craft
ddev craft install

# Install Vite plugin
ddev craft plugin/install vite

# Launch the site!
ddev launch

Here's what you'll see!

❓ Also... somehow Vite is reloading when I edit .twig files. Even though I haven't added vite-plugin-restart

Anyone else want to confirm if I'm crazy or not?

[joshuapease]

@ekfuhrmann Wanted to get your thoughts on what a good starting point is for Tailwind.

An empty config? Or are there defaults that the UI team always reaches for?

[ekfuhrmann]

We've discussed this a bit in respects to Blueprint but the consensus was that we should include our own custom spacing system in the base tailwind. Not saying we should necessarily do it here, but having all of these values ready to go out of the box could be useful, and then it's easy enough to modify from there.

spacing: {
  0: '0px',
  1: '1px',
  2: '2px',
  4: '4px',
  6: '6px',
  8: '8px',
  10: '10px',
  12: '12px',
  16: '16px',
  20: '20px',
  24: '24px',
  28: '28px',
  32: '32px',
  36: '36px',
  40: '40px',
  44: '44px',
  48: '48px',
  52: '52px',
  56: '56px',
  60: '60px',
  64: '64px',
  80: '80px',
  96: '96px',
  112: '112px',
  128: '128px',
},

[ekfuhrmann]

The only suggestion is to include our spacing system. Since we're using postcss-pxtorem (which I love), keying it up as just px values is fine. I normally using a helper function like pxPair() to simplify it a bit, but in the grand scheme of things is pretty unnecessary.

[ekfuhrmann]

Is this entirely necessary? We'll need to keep it upgraded based on props. We'll want to include size-* for instance.

[maxfenton]

@ekfuhrmann
Ok, so we could use propList: [*] and not need to update this; as I was adding postcss-pxtorem to Viget projects, I wanted to be cautious and know what was being changed.

I think we have two options:

• an explicit list of properties (and add size* or size-*)
• a wildcard propList [*]

[ekfuhrmann]

Generally I use the following settings which seems to work best for me:

{
  rootValue: 16,
  propList: ['*'],
  mediaQuery: true,
  minPixelValue: 0,
},

[joshuapease]

Is propList referring to CSS properties?

size- is just a Tailwind class right?

I'm cool with using a * and letting projects opt out of specific properties.

From the docs

Use ! to not match a property. Example: ['*', '!letter-spacing']