I’m working on a new Optimizely CMS project and need help with the frontend setup. I want to use Tailwind CSS along with design tokens from Figma.
Here’s what I’ve done so far:
- Created a separate frontend directory in my project
- Installed Tailwind with dependencies:
npm install --save-dev tailwindcss postcss autoprefixer
- Created config files:
npx tailwindcss init --postcss
- Modified my tailwind.config.js to scan .cshtml files
- Added the Tailwind imports to my main stylesheet
- Manually copied some colors and spacing values from Figma into the config
The problem is that Tailwind styles aren’t showing up in my Razor views properly. Also, copying design tokens one by one from Figma seems really inefficient.
I’m looking for:
- A way to make Tailwind work correctly with Optimizely CMS views
- An automated method to import Figma tokens instead of manual copying
Has anyone successfully set this up before? What’s the best approach?
Had the same bundle timing issues. Fixed it by changing how CSS gets processed - let Tailwind compile completely before Optimizely touches anything. Make a prebuild script that runs tailwindcss build and dumps everything to wwwroot, then just reference that compiled file directly in your views. Don’t use the CMS bundler at all. Skip PostCSS integration with Optimizely too - it breaks JIT compilation. Your content paths look good but double-check the file locations actually match. For Figma, grab the Design Tokens plugin and write a custom transformer. Export tokens as CSS custom properties first, then convert those to Tailwind variables in your config. This keeps your design system separate from the build pipeline mess and makes debugging way easier when tokens change.
Had the same headache with Tailwind and Optimizely CMS. The issue is CSS compilation timing - Optimizely’s bundling messes with Tailwind’s purging process. Here’s what fixed it for me: set up a separate build step that compiles Tailwind first, then reference the compiled CSS in your bundle config. Use npx tailwindcss -i ./src/input.css -o ./wwwroot/css/output.css --watch during development. For the Figma workflow, grab a plugin like ‘Figma Variables to Tailwind’ - it exports your design tokens straight to Tailwind config format. No more manual copying and everything stays consistent. Just make sure your content paths are correct and Tailwind processes after your cshtml files generate but before the final bundle.
Had the same headache with Tailwind and Optimizely CMS last year. Your build process probably isn’t watching the cshtml files properly. Check your tailwind.config.js content paths - you need the full structure like ‘./Views//*.cshtml’ and './Components//*.cshtml’. Also make sure PostCSS runs during your bundling setup’s build process. For Figma tokens, try the Figma Tokens plugin with Style Dictionary. Export tokens as JSON from Figma, then Style Dictionary converts them to Tailwind format automatically. Saves tons of time vs copying manually and keeps everything synced when designs change. Just make sure your build pipeline processes the CSS before it hits the CMS views.
I’m dealing with this exact same issue right now. The problem is Optimizely’s asset pipeline fights with how Tailwind processes files. Instead of running Tailwind separately, integrate it directly into your existing bundling setup. Configure your bundleconfig.json to process the Tailwind source file and make sure the output paths match what your layout files are looking for. The content scanning problems usually come from bad glob patterns - check that your paths actually match your project structure, especially any custom view locations. For Figma integration, try the Figma to Code plugins that export CSS variables. Then map those variables in your Tailwind config using theme extend. This keeps your design system connected while automating updates when tokens change.
css bundling issue for sure. Optimizely cms doesn’t play nice with tailwind’s jit compilation. run tailwind in watch mode separately from your cms build - it’ll catch all the classes from your razor views. for figma tokens, grab the tokens studio plugin. way better than manual exports and works great with tailwind configs.