1
2
3
4
5
6
7
8
9

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;

.btn {
  @apply px-4 py-2 bg-blue-600 text-white rounded;
}

@tailwind utilities;

1

npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

// 一个普通的postcss.config.js配置方式
const themeDir = __dirname + "/../../";

module.exports = {
  plugins: [
    require("postcss-import")({
      path: [themeDir],
    }),
    require("tailwindcss")(themeDir + "assets/css/tailwind.config.js"),
    require("autoprefixer")({
      path: [themeDir],
    }),
  ],
};

// 或者
module.exports = {
  plugins: {
    'postcss-import': {},
    tailwindcss: {},
    autoprefixer: {},
    // other plugins can go here, such as autoprefixer
  },
};


// rollup里配置的postcss
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import scss from "rollup-plugin-scss";
import autoprefixer from "autoprefixer";

import postcss from "postcss";
import atImport from "postcss-import";
import tailwindcss from "tailwindcss";

const isProduction =
  process.env.NODE_ENV === "production" || process.env.BUILD === "production";

export default (async () => ({
  input: "src/js/main.js",
  output: {
    file: "public/js/bundle.js",
    format: "iife",
    sourcemap: true,
    globals: {
      jquery: "$",
    },
  },
  external: ["jquery"],
  plugins: [
    resolve(), // Tells Rollup how to find date-fns in node_modules
    commonjs(), // Convert CommonJS modules to ES Modules.
    isProduction && (await import("rollup-plugin-terser")).terser(),
    scss({
      output: "public/css/bundle.css",
      sass: require("sass"),

      processor: (css) =>
        postcss([
          autoprefixer({ overrideBrowserslist: "Edge 18" }),
          tailwindcss(),
        ])
          .use(atImport())
          .process(css, { from: undefined })
          .then((result) => result.css),
      // Add file/folder to be monitored in watch mode so that changes to these files will trigger rebuilds.
      // Do not choose a directory where rollup output or dest is pointed to as this will cause an infinite loop
      watch: "src/sass",
      // watch: ["src/styles/components", "src/multiple/folders"],
    }),
  ],
}))();

1
2
3

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

1
2
3
4

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

1

npm init -y

1

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

1
2
3
4
5
6
7

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

1

npx tailwindcss init

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

1
2
3
4

/* ./your-css-folder/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

1
2
3

@import "node_modules/tailwindcss/base";
@import "node_modules/tailwindcss/components";
@import "node_modules/tailwindcss/utilities";

1
2
3

postcss styles/style.css -o public/css/tailwind.css
或者
npx tailwindcss build src/styles/style.css -o public/css/tailwind/css

1

<link ref="stylesheet" href="css/tailwind.css">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

/**
 * This injects Tailwind's base styles and any base styles registered by
 * plugins.
 */
@tailwind base;

/**
 * This injects Tailwind's component classes and any component classes
 * registered by plugins.
 */
@tailwind components;

/**
 * This injects Tailwind's utility classes and any utility classes registered
 * by plugins.
 */
@tailwind utilities;

/**
 * Use this directive to control where Tailwind injects the responsive
 * variations of each utility.
 *
 * If omitted, Tailwind will append these classes to the very end of
 * your stylesheet by default.
 */
@tailwind screens;

1
2
3
4
5
6

.btn {
  @apply font-bold py-2 px-4 rounded;
}
.btn-blue {
  @apply bg-blue-500 hover:bg-blue-700 text-white;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* Input */
.foo {
  color: blue !important;
}

.bar {
  @apply foo;
}

/* Output */
.foo {
  color: blue !important;
}

.bar {
  color: blue;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

@layer components {
  .btn-blue {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
  }
}

@layer utilities {
  @variants hover, focus {
    .filter-none {
      filter: none;
    }
    .filter-grayscale {
      filter: grayscale(100%);
    }
  }
}

1
2
3
4
5
6
7
8

@variants focus, hover {
  .rotate-0 {
    transform: rotate(0deg);
  }
  .rotate-90 {
    transform: rotate(90deg);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

.rotate-0 {
  transform: rotate(0deg);
}
.rotate-90 {
  transform: rotate(90deg);
}

.focus\:rotate-0:focus {
  transform: rotate(0deg);
}
.focus\:rotate-90:focus {
  transform: rotate(90deg);
}

.hover\:rotate-0:hover {
  transform: rotate(0deg);
}
.hover\:rotate-90:hover {
  transform: rotate(90deg);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* Input */
@variants hover, focus {
  .banana {
    color: yellow;
  }
}

/* Output */
.banana {
  color: yellow;
}
.hover\🍌hover {
  color: yellow;
}
.focus\🍌focus {
  color: yellow;
}