运行 build-css 后 Tailwindcss 样式完全消失答案

【问题标题】：Tailwindcss styles completely disappears after running build-css运行 build-css 后 Tailwindcss 样式完全消失
【发布时间】：2022-08-23 22:05:38
【问题描述】：

This is the import url

在终端上编写 npm run build-css 后。我之前做出的改变和我想要做出的改变都消失了。没有找到我在 index.html 中的 tailwindcss 样式。

extend: {
    colors: {
      primary: \"FF6363\"
    }, 
   
    fontfamily: {
      body: [\'Nunito\'], 
       }
    },

标签： css

【解决方案1】：

我会首先确保颜色扩展在它之前有正确的'#'。

还要检查您的 webpack.mix.js 文件，以确保您以正确的顺序调用文件。

应该类似于我的东西。

mix.js("resources/js/app.js", "public/js")
    .vue()
    .sass("resources/sass/app.scss", "public/css")
    .sass("resources/sass/components/sidebar.scss", "public/css")
    .sass("resources/sass/components/modal.scss", "public/css")
    .sass("resources/sass/components/language-picker.scss", "public/css")
    .sass("resources/sass/custom.scss", "public/css")
    .options({
        processCssUrls: false,
        postCss: [tailwindcss("tailwind.config.js")],
        output: {
            path: "birdboard",
            publicPath: "/dist/js/",
            filename: "./dist/js/bundle.js"
        }
    });

还要检查您的 tailwind.config.js 文件是否存在格式问题，我的版本遵循这个简单的布局。

module.exports = {
    theme: {
        screens: {
            sm: "576px",
            // => @media (min-width: 576px) { ... }

            md: "960px",
            // => @media (min-width: 960px) { ... }

            lg: "1440px"
            // => @media (min-width: 1440px) { ... }
        },
        backgroundColor: theme => ({
            page: "var(--page-background-color)",
            card: "var(--card-background-color)",
            button: "var(--button-background-color)",
            header: "var(--header-background-color)"
        }),
        colors: {
            error: "var(--text-error-color)",
            grey: {
                default: "rgba(0, 0, 0, 0.4)",
                lighter: "#F5F6F9"
            },
            white: {
                default: "#fff"
            },
            blue: {
                default: "#47cdff",
                light: "#8ae2fe"
            },
            default: "var(--text-default-color)",
            accent: {
                default: "var(--user-accent-color)",
                light: "var(--text-accent)"
            },
            muted: {
                default: "var(--text-muted-color)",
                light: "var(--text-muted-light-color)"
            }
        },
        boxShadow: {
            default: "0 0 5px 0 rgba(0, 0, 0, 0.08)",
            blue: "0 2px 7px 0 #b0eaff"
        },
        extend: {}
    },
    variants: {},
    plugins: []
};

【讨论】：