#Hook up tailwind config with ES6 typescript environment

1 messages · Page 1 of 1 (latest)

wind horizon
#

I'm trying to import the tailwindConfig into my vite project. Unfortunately I'm not having any luck. I've been reading two threads.

Front end framework is React

This one is mostly around CJS environments.
https://github.com/tailwindlabs/tailwindcss/discussions/3646

This is meant to be valid for es6, but part of it's out of date and as closely as I followed it I couldn't find the solution...
https://stackoverflow.com/a/66406070/15592981

GitHub
Referencing in JavaScript with vite · tailwindlabs tailwindcss · Di...

Hello, I am using tailwindcss with vite and the installation following the official documentation was smooth. I also wanted to reference the theme from JavaScript and also followed the official doc...

Stack Overflow
In Vite2, How to import an ESModule in tailwind.config.js

Building a Vite2 app.
tried to import an ESModule in tailwind.config.js.
The Module was exported like:
export default xxx;

Then I imported the module in tailwind.config.js like:
const xx = require...

simple summit
#

I'm working on exactly the same thing. You can send me a message if you want and we can compare notes. Probably worthwhile to mention that I work in Sveltekit though, you made no mention of your ecosystem.

wind horizon
#

Sorry, I'm so used to React that I just take it as read...

In the end I managed to get a workable solution.

#

So in the end I managed to get the pathing right, but not the aliasing...

ts.config.json

"compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/", "src/Hooks/*.tsx"],
      "~/*": ["./*", "./*.js"]
    },
    "allowJs": true,
// ...
}

Dev dependencies

"type": "module",
"devDependencies": {
    "@types/node": "^20.5.3",
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^6.0.0",
    "@typescript-eslint/parser": "^6.0.0",
    "@vitejs/plugin-react": "^4.0.3",
    "autoprefixer": "^10.4.15",
    "eslint": "^8.45.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.3",
    "postcss": "^8.4.28",
    "tailwindcss": "^3.3.3",
    "ts-node": "^10.9.1",
    "typescript": "^5.0.2",
    "vite": "^4.4.5"
}

In the end I had to settle on relative pathing, but there were moments

#

This was my Vite config file, but as I was in module, I don't even think the project had access to __dirname... 🤷

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import * as path from "path"

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
      "~": path.resolve(__dirname)
    }
  }
})
simple summit
#

Seems like we are on very different time zones. Alias a path to your tailwind config in vite, then import and resolve that config in a server side func