I have recently started learning Optimizely CMS, and I need to implement the frontend structure for my project. As part of this, I need to install Tailwind CSS and integrate Figma design tokens.

I created a FED (frontend) folder inside my Optimizely CMS project to manage styles separately.

Installed Tailwind CSS using:

npm install -D tailwindcss postcss autoprefixer

Generated the Tailwind config file:

npx tailwindcss init -p

Updated tailwind.config.js to include Optimizely CMS views (.cshtml files) in the content array.

Added Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;) in my CSS file.

Tried to integrate Figma design tokens by manually adding colors and spacing in tailwind.config.js.

What I Expected:

Tailwind CSS should be applied correctly to my Razor views. Figma design tokens should be easily imported and used in Tailwind without manually adding each one.

I have recently started learning Optimizely CMS, and I need to implement the frontend structure for my project. As part of this, I need to install Tailwind CSS and integrate Figma design tokens.

I created a FED (frontend) folder inside my Optimizely CMS project to manage styles separately.

Installed Tailwind CSS using:

npm install -D tailwindcss postcss autoprefixer

Generated the Tailwind config file:

npx tailwindcss init -p

Updated tailwind.config.js to include Optimizely CMS views (.cshtml files) in the content array.

Added Tailwind directives (@tailwind base; @tailwind components; @tailwind utilities;) in my CSS file.

Tried to integrate Figma design tokens by manually adding colors and spacing in tailwind.config.js.

What I Expected:

Tailwind CSS should be applied correctly to my Razor views. Figma design tokens should be easily imported and used in Tailwind without manually adding each one.

• c#
• tailwind-css
• content-management-system

• When you build the css (npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css), does your <output>.css file contain the tokens you added? – Sancho Panza Commented Mar 18 at 7:08
• amm, No. any proper example available or documentation? – Jay Thakkar Commented Mar 18 at 8:45
• @SanchoPanza, your solution is v4-specific and only necessary for the CLI. In the question, TailwindCSS is being used with PostCSS, so there’s no need for CLI modules. The init process itself has been deprecated, as it no longer serves a purpose from v4 onwards. The installation for v3 has changed, as mentioned in my answer. – rozsazoltan Commented Mar 18 at 9:18
• To use the new v4 CLI, you would need to install v4. I'm not sure what the OP's goal is. If it's installing v3, only minor changes are needed, see here. Or if it's installing v4, in that case, it can still use PostCSS, which might be a better alternative than the CLI. – rozsazoltan Commented Mar 18 at 9:20
• @JayThakkar, gist of rozsazoltans answer: you need to proactivly get tailwind to generate the output.css that is then used in your frontend. The means to do so depend on your specific setup/version. – Sancho Panza Commented Mar 18 at 9:32

1 Answer 1

TailwindCSS v3

From January 2025, running npm install tailwindcss will install the new v4 instead of the old v3. To install v3 in the usual way, use:

npm install tailwindcss@3

• Problem installing TailwindCSS with "npx tailwindcss init -p" command - StackOverflow

The installation guide for TailwindCSS v3 has also been updated:

• Get started TailwindCSS v3 with PostCSS - TailwindCSS v3 Docs
• Updating old (v3) installation guides - issue #1971 - GitHub
• Use tailwindcss@3 in v3 docs - PR #2022 - GitHub

TailwindCSS v4

Using v4 introduces many breaking changes, so if you want to use v4, it's worth reviewing the new installation steps.

• Get started TailwindCSS v3 with PostCSS - TailwindCSS v4 Docs
• How to install TailwindCSS v4 with PostCSS instead of TailwindCSS v3? - StackOverflow
• What's changed from v4? - StackOverflow

Deprecated init process

In v4, the installation process has changed. It's now simpler. The init command has become obsolete and is no longer usable from v4 onwards because it's not needed anymore.

• tailwindlabs/tailwindcss #15791 - init process not available - GitHub

More breaking changes

• Upgrading your Tailwind CSS projects from v3 to v4 - TailwindCSS v4 Docs
• New CSS-first configuration option in v4 (without tailwin.config.js) - StackOverflow
• Automatic Source Detection from TailwindCSS v4 - StackOverflow
• Removed @tailwind directives - StackOverflow
• Deprecated: preprocessors support - StackOverflow
• Separated PostCSS plugin for TailwindCSS - StackOverflow