Configuración del archivo jsconfig.js

Clase #5: Configuración del archivo jsconfig.js 5/31 📙

¿Qué es jsconfig.js?

jsconfig.js es un archivo de configuración para ayudar al Language Server (LSP) de su editor con el uso de javascript en su carpeta de proyecto. Fuente: aquí

Continuando con el proyecto: 🔨

 
Vamos crear el archivo jsconfig.json para agregar la configuración de los paths que nos permitirán simplificar el llamado de las rutas sin tener que colocar los slash y puntos, ya cuando se importe se coloca el arroba y el nombre de la carpeta. El archivo queda así:

{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@styles/*":["styles/*"],
}
}
}

En el archivo _app.js de la ruta src/pages el import está: import '../styles/tailwind.css';
dado que ya tenemos configurado el path para styles, el import se modifica y queda así:

import '@styles/tailwind.css';

Por lo que pude entender es análogo al archivo de tsconfig de TypeScript, con configuraciones como para el compilador.
Aquí un enlace para ampliar.
Saludos!

No es necesario en tailwind importar el modulo de colores ya que desde la version v3 los incluye.

codigo final

/** @type {import('tailwindcss').Config} */
module.exports = {
    content: ['./src/**/*.{js,html}'],
    theme: {
        extend: {},
    },
    plugins: [],
};

ver documentación

Creamos el Archivo jsconfig.json y agregamos el alias para styles:

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      "@styles/*": ["styles/*"]
    }
  }
}

Para typescript

• archivo tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "baseUrl": "src",
    "paths": { "@/styles/*": ["styles/*"] }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

NOTA: En el archivo tailwind.config.js especificar en el array de latributo content las rutas desde la ubicacion src (si es el caso), de la siguiente manera:

const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./src/pages/**/*.{js,ts,jsx,tsx}', './src/components/**/*.{js,ts,jsx,tsx}'],
  theme: {
    colors: {
      ...colors,
    },
  },
};

Hola, Comuniadad. 👋

Para evitar algún problema por si no le toma los estilos o cualquier ruta, yo me aseguro de ponerle @/carpeta, ya que así me aseguro que siempre busque desde el src la carpeta de estilos.
👇

Module not found: Can't resolve '@styles/tailwind.css'
> 1 | import "@styles/tailwind.css";
  2 | 
  3 | export default function App({ Component, pageProps }) {
  4 |   return <Component {...pageProps} />;

Por si les aparece éste error.

Saludos

En lugar de agregar un path distinto por cada carpeta dentro del src, yo prefiero hacer un único path apuntando al src:

"paths": {
    "@/*": ["./src/*"]
}

Tenía rato batallando con tailwind css y de tanto analizar me di cuenta que puse comillas simples en este archivo de confiuración
las cambié por comillas dobles y ya funciona

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

creamos un nuevo archivo en la raíz y añadimos un nuevo alias
jsconfig.json:

{
    "compilerOptions": {
        "baseUrl": "src",
        "paths": {
            "@styles/*": ["styles/*"],
        }
    }
}

modificamos las importaciones de estilos con su nuevo alias
src/pages/_app.js:

import '@styles/tailwind.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

corremos el proyecto y verificamos que todo funcione correctamente

npm run dev